How to use Flex-Layout Angular

I’m going to cover in this blog

1. Implementing responsive web design using the Flex Layout library.
2. Changing the layout based on the viewport size.
3. Using the Layout Module of Angular Material.

When it comes to developing a web app, you need to decide whether you’ll have separate apps for desktop and mobile versions or reuse the same code on all devices.

Nowadays, Often we choose to use a single base code and implement Responsive Web Design(RWD). So UI Layout will change or adapt according to Screen Size.

To implement RWD, you can use CSS media queries, represented by the @media rule. In the CSS of your app, you can include a set of media queries offering different layouts for various screen widths. The browser constantly checks the current window width, and as soon as the width crosses a breakpoint set in the @media rules (for example, the width becomes smaller than 640 pixels), a new page layout is applied.

To Implement RWD, Even You can use CSS FLexbox with media Queries, We can be rendered our content horizontally or vertically as per the View size. if the browser can’t fit the Flexbox content horizontally (or vertically), the content is rendered in the next row (or column).

The Angular Flex-Layout library (https://github.com/angular/flex-layout)is a UI engine for implementing RWD without writing media queries in your CSS files. The library provides a set of simple Angular directives that internally apply the rules of the flexbox layout to the HTML DOM.

And Angular Material offers you the MatLayoutModule module that notifies your app about the current width of the viewport on the user’s device. That means you can change the layout of your app according to the width of the ViewPort dynamically.

Before Starting About the Angular FlexLayout, I'm assuming you already know the basics of Angular.

Let’s go head to see How to install FlexLaout in angular Project.

1. First, you need to add the Flex Layout library and its peer dependency, @angular/cdk, to your project:

npm i @angular/flex-layout @angular/cdk 

2. The next step is to add the FlexLayoutModule and LayoutModule to the root module @NgModule() decorator, as shown in the following listing

import {FlexLayoutModule} from '@angular/flex-layout';
import {LayoutModule} from '@angular/cdk/layout';
@NgModule({
  imports: [
    FlexLayoutModule,
    LayoutModule
    othermodules,
  ]
})
export class AppModule {}

3. The next step creates a component that displays the <div> elements next to each other from left to right gets equal space within parent div. Let’s take a look.

@Component({
  selector: 'app-root',
  styles: [`
    #card1{background-color: rgba(0, 26, 255, 0.452);}
    #card2{background-color: rgba(255, 255, 0, 0.377);}
    #card3 {background-color: rgba(255, 17, 0, 0.377);}
          `],
  template: `
<div fxLayout="row" fxLayoutGap="15px"> ------->1

<!-- a material card 1 start -->
  <mat-card class="parent" fxFlex id="card1"> -------------------> 2
    <mat-card-header>
       <mat-card-title> card 1</mat-card-title>
       <mat-card-subtitle>sub-header</mat-card-subtitle>
    </mat-card-header>
   </mat-card>
<!-- a material card 1 end -->
<!-- a material card 2start -->
<mat-card fxFlex id="card2">
    <mat-card-header>
       <mat-card-title> card 2</mat-card-title>
       <mat-card-subtitle>sub-header</mat-card-subtitle>
    </mat-card-header>
 </mat-card>
<!-- a material card 2end -->
<!-- a material card 3 start -->
<mat-card fxFlex id="card3">
    <mat-card-header>
       <mat-card-title>card 3</mat-card-title>
       <mat-card-subtitle>sub-header</mat-card-subtitle>
    </mat-card-header>
 </mat-card>
<!-- a material card 3 end -->
`
})
export class AppComponent {}

1. The fxLayout directive turns the <div class=”parent”> into a flex-layout container where children are allocated horizontally (in a row).
2. The fxFlex directive instructs each child element(<div class=”child-1”>) to take equal space within the parent container.
3. The fxLayoutGap=”15px” provides the 15px margin-left to each child except the last one.

To see this application in action, run the following command:

ng serve --app flex-layout -o

To layout the container’s children vertically.

@Component({
  selector: 'app-root',
  styles: [`
    #card1{background-color: rgba(0, 26, 255, 0.452);}
    #card2{background-color: rgba(255, 255, 0, 0.377);}
    #card3 {background-color: rgba(255, 17, 0, 0.377);}
          `],
  template: `

<div fxLayout="column" fxLayoutGap="15px"> ------->1

<!-- a material card 1 start -->
  <mat-card class="parent" fxFlex id="card1"> -------------------> 2
    <mat-card-header>
       <mat-card-title> card 1</mat-card-title>
       <mat-card-subtitle>sub-header</mat-card-subtitle>
    </mat-card-header>
   </mat-card>
<!-- a material card 1 end -->
<!-- a material card 2start -->
<mat-card fxFlex id="card2">
    <mat-card-header>
       <mat-card-title> card 2</mat-card-title>
       <mat-card-subtitle>sub-header</mat-card-subtitle>
    </mat-card-header>
 </mat-card>
<!-- a material card 2end -->
<!-- a material card 3 start -->
<mat-card fxFlex id="card3">
    <mat-card-header>
       <mat-card-title>card 3</mat-card-title>
       <mat-card-subtitle>sub-header</mat-card-subtitle>
    </mat-card-header>
 </mat-card>
<!-- a material card 3 end -->
`
})
export class AppComponent {}

1. The fxLayout=” column” directive with column value turns horizontally to vertically view that means our div will render from top to bottom.

save it and run the app

Thanks and Regards

Ajay Singh

https://www.linkedin.com/in/iamajaysingh4/