How to create layout Angular Material and Flex-Layout

Create a new Angular project, install Material and flex-layout

First, let’s create a new Angular project with @angular/cli in your code repository

ng new material-project
cd material-project
ng serve

Then, let’s install the 3 main packages of Angular Material, run in a terminal:

npm install --save @angular/material @angular/cdk @angular/animations

In app.module.ts, you have to import ‘BrowserAnimationsModule’ and the Material modules you need for your project:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule, MatIconModule, MatToolbarModule, MatButtonModule, MatFormFieldModule, MatInputModule } from '@angular/material';
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

To be able to use the icons, you have to add a link tag in src/index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

If you want to use a theme, you can add the following import in src/styles.css:

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

If you want gesture support, you have to install the package hammerjs

npm install --save hammerjs

And import it in your app’s entry point (usually it is the file src/main.ts):

import 'hammerjs';

Flex-Layout module

Install the flex-layout module with npm:
npm install @angular/flex-layout@latest --save

Then, import the module in your app.module.ts and add it to the NgModule’s imports:

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

Create the main layout with a toolbar
To start fresh, remove all the html in app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
</div>
<mat-toolbar>
  <mat-toolbar-row>
    <a target="_blank" href="https://material.angular.io/">Angular Material</a>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <a target="_blank" href="https://www.npmjs.com/package/@angular/flex-layout">Flex-Layout</a>
  </mat-toolbar-row>
  <mat-toolbar-row>
    <a target="_blank" href="https://www.letsboot.com/">Letsboot.com</a>
  </mat-toolbar-row>
</mat-toolbar>