Responsive app - EGuillemot/Angular-test GitHub Wiki
npm install @angular/flex-layout
In src/app/app.module.ts, add :
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
...
imports: [FlexLayoutModule],
...
})
export class AppModule { }In src/app, ng g component layout
In src/app/layout/layout.component.html, replace all with :
<div fxLayout="row wrap" fxLayoutAlign="center center" class="layout-wrapper">
<div fxFlex="90%" fxFlex.lt-md="100%" class="flex-wrapper">
<ng-content></ng-content>
</div>
</div>In src/app/layout/layout.component.scss, add :
.layout-wrapper{
height: 100%;
}
.flex-wrapper{
height: 100%;
}In src/app/app.component.html, add the following around <router-outlet> :
<app-layout>
<router-outlet></router-outlet>
</app-layout>