angular material flex layout example latest version 2020

angular material flex layout example latest version 2020

FLEX-LAYOUT IN ANGULAR

Hey, guys today I teach you about flex-layout. So let’s start.

coming days more people asked questions about, angular flex layout examples, angular 7 flex layout, angular 6 flex layout tutorial, flex layout demo, angular flex layout center horizontally, @angular/flex-layout angular 7, flex layout responsive, flex layout wrap, And,

1. What is Flex-Layout 
2. How to install 
3. How to import

1. Flex-Layout:- is a component engine that was recently announced by the Angular team. It allows to easily creating row-column page layouts with a set of directives available to use in your templates. No need for separate CSS styling. The library itself is written in Typescript, so no external style sheets are needed. It also provides a way to specify different directives at different breakpoints to create responsive layouts.
2. Installing:- install flex-layout from npm:

npm install @angular/flex-layout --save

OR with Yarn:

yarn add @angular/flex-layout

3. Importing:- Now import FlexLayoutModule in your app module.

app.module.ts

Import {FlexLayoutModule} from '@angular/flex-layout';

@NgModule({

imports: [

BrowserModule,

FlexLayoutModule,

],

})

export class AppModule { }

Now here design your Html page.

Interpolation.component.html

<div class="container" fxLayout fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="10px">

    <div class="item item-1" fxFlex="30%" style="background-color: rgb(157, 79, 230);">Item 1 </div>

    <div class="item item-2" fxFlex="20%" fxFlexOrder="3" style="background-color: crimson;">Item 2</div>

    <div class="item item-3" fxFlex="30%" style="background-color: cyan;">Item 3</div>

</div>

Here’s showing the demo of flex-layout:-

angular material flex layout example latest version 2020