Skip to main content

Posts

Showing posts with the label Angular Flex Layout

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 - mediaQ