Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Webpack Configuration

Jump to bottom
Joey Perrott edited this page Feb 22, 2018 · 5 revisions

Install the Angular Flex-Layout Library

npm install --save @angular/flex-layout

or...

yarn add @angular/flex-layout

Import the Angular Flex-Layout Module

app.module.ts

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

Validate Your Configuration

Add the code below into an existing component (or add something similar) to verify Angular Flex-Layout has been properly imported into your application.

home.component.html

<div class="flexDemoContainer"> <div fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxFlex> <div fxFlex> I'm above on mobile, and left on larger devices. </div> <div fxFlex> I'm below on mobile, and right on larger devices. </div> </div> </div>

home.component.css

.flexDemoContainer { border: solid 1px #red; box-sizing: content-box !important; }

                   -   API Documentation   -   StackBlitz Template   -   Live Demos

Clone this wiki locally