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
0 Comments