Responsive app - EGuillemot/Angular-test GitHub Wiki

Based on this article

Add Flex Layout

npm install @angular/flex-layout

In src/app/app.module.ts, add :

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

Create Layout

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>
⚠️ **GitHub.com Fallback** ⚠️