Angular Flex Layout, Angular responsive layout, Angular responsive layout using flex layout

Angular Flex Layout

Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings. 
Refer Flex Layout @Github.

Step 1: Add Flexlayout to project 

npm i --save @angular/flex-layout

Step 2:  Import it in app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout";
@NgModule({  declarations: [    AppComponent  ],  imports: [    BrowserModule, BrowserAnimationsModule, MatButtonModule, HttpClientModule, FlexLayoutModule  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }


Step 3: In Required Component's HTML Template Add a div with fxLayout directive

<div fxLayout></div>
The fxLayout directive on the container sets the flex container. Defaults to row.

MediaQueries and Aliases

breakpoint - mediaQuery
xs-'screen and (max-width: 599px)'
sm-'screen and (min-width: 600px) and (max-width: 959px)'
md-'screen and (min-width: 960px) and (max-width: 1279px)'
lg-'screen and (min-width: 1280px) and (max-width: 1919px)'
xl-'screen and (min-width: 1920px) and (max-width: 5000px)'

Step 4:Add Below HTML snippet for Responsive Layout

<div fxLayout="column"><div fxLayout="row" fxLayout.sm="column"  fxLayout.xs="column"   >  <div>    Row 1 </div>  <div flexorder="1" fxFlex.xs=""    fxFlex.sm="" fxflex.xs="" fxflex="33%"  >    <mat-card class="example-card"  >     <div class="example-container">  <mat-form-field>    <input matInput placeholder="Input">  </mat-form-field>
  <mat-form-field>    <textarea matInput placeholder="Textarea"></textarea>  </mat-form-field>
  <mat-form-field>    <mat-select placeholder="Select">      <mat-option value="option">Option</mat-option>    </mat-select>  </mat-form-field>  <div class="example-container" >  <mat-form-field>    <input matInput placeholder="Input">  </mat-form-field>
  <mat-form-field>    <textarea matInput placeholder="Textarea"></textarea>  </mat-form-field>
  <mat-form-field>    <mat-select placeholder="Select">      <mat-option value="option">Option</mat-option>    </mat-select>  </mat-form-field></div></div></mat-card></div>  <div flexorder="2" fxFlex.xs=""    fxFlex.sm="" fxflex.xs="" fxflex="33%" >    <mat-card class="example-card">  <div class="example-container">  <mat-form-field>    <input matInput placeholder="Input">  </mat-form-field>
  <mat-form-field>    <textarea matInput placeholder="Textarea"></textarea>  </mat-form-field>
  <mat-form-field>    <mat-select placeholder="Select">      <mat-option value="option">Option</mat-option>    </mat-select>  </mat-form-field></div><div class="example-container">  <mat-form-field>    <input matInput placeholder="Input">  </mat-form-field>
  <mat-form-field>    <textarea matInput placeholder="Textarea"></textarea>  </mat-form-field>
  <mat-form-field>    <mat-select placeholder="Select">      <mat-option value="option">Option</mat-option>    </mat-select>  </mat-form-field></div></mat-card>  </div>  <div  flexorder="3" fxFlex.xs=""    fxFlex.sm="" fxflex.xs="" fxflex="33%" >   <mat-card class="example-card">  <div class="example-container">  <mat-form-field>    <input matInput placeholder="Input">  </mat-form-field>
  <mat-form-field>    <textarea matInput placeholder="Textarea"></textarea>  </mat-form-field>
  <mat-form-field>    <mat-select placeholder="Select">      <mat-option value="option">Option</mat-option>    </mat-select>  </mat-form-field></div><div class="example-container">  <mat-form-field>    <input matInput placeholder="Input">  </mat-form-field>
  <mat-form-field>    <textarea matInput placeholder="Textarea"></textarea>  </mat-form-field>
  <mat-form-field>    <mat-select placeholder="Select">      <mat-option value="option">Option</mat-option>    </mat-select>  </mat-form-field></div></mat-card>  </div></div></div>

Directives for fxLayout

{ type: core.Directive, args: [{ selector: "\n  [fxLayout],\n  [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl],\n  [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl],\n  [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]\n" },] },

fxLayout accepts two value row or column 
fxLayout.xs-'screen and (max-width: 599px)'
fxLayout.sm-'screen and (min-width: 600px) and (max-width: 959px)'
fxLayout.md-'screen and (min-width: 960px) and (max-width: 1279px)'
fxLayout.lg-'screen and (min-width: 1280px) and (max-width: 1919px)'
fxLayout.xl-'screen and (min-width: 1920px) and (max-width: 5000px)'

example of responsve div 

<div  fxFlex.xs="column"    fxFlex.sm="column" fxflex.md="column" fxLayout.lg="row"  fxLayout.xl="row" ></div>
upto width 1279px the div will be column after width 1279px it  change's the appearence to row 

Step 5: Output 






Code Action @ StackBlitz

No comments

Post Top Ad

Post Bottom Ad