Part 5 - Thirdparty dependencies

https://material.angular.io/

1.Install angular material, angular animations and angular flex layout

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

• Add animations module to the main app module.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

2.Add a new nx lib to hold all the common material components we will use in our app

ng g lib material

• Add all the common material components and re-export them

libs/material/src/material.module.ts

import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';

import {
  MatInputModule,
  MatCardModule,
  MatButtonModule,
  MatSidenavModule,
  MatListModule,
  MatIconModule,
  MatToolbarModule,
  MatProgressSpinnerModule,
  MatMenuModule,
  MatTableModule,
  MatSelectModule
} from '@angular/material';

@NgModule({
  imports: [
    FlexLayoutModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatSidenavModule,
    MatListModule,
    MatIconModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatTableModule,
    MatSelectModule
  ],
  exports: [
    FlexLayoutModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
    MatSidenavModule,
    MatListModule,
    MatIconModule,
    MatToolbarModule,
    MatProgressSpinnerModule,
    MatMenuModule,
    MatTableModule,
    MatSelectModule
  ]
})
export class MaterialModule {}

• Add material module to auth module

libs/auth/src/auth.module.ts

import { MaterialModule } from '@demo-app/material';

@NgModule({
  ...
imports: [CommonModule, RouterModule, HttpClientModule, MaterialModule],
  ...
})
export class AuthModule { }

3. Add material default styles

apps/customer-portal/src/styles.scss

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

• Update the login-form to use material components

libs/auth/src/components/login-form/login-form.component.html

<mat-card>
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
        <form fxLayout="column" fxLayoutAlign="center none">
            <mat-input-container>
                <input matInput placeholder="username" type="text" #username>
            </mat-input-container>
            <mat-input-container>
                <input matInput placeholder="password" type="text" #password>
            </mat-input-container>
        </form>
        <button mat-raised-button (click)="login({username:username.value, password:password.value})">login</button>
    </mat-card-content>
</mat-card>

4. Go and explore flex layout docs

https://tburleson-layouts-demos.firebaseapp.com/#/docs