[Angular] Angular CDK Intro

1. Installl latest @angular/cli:

sudo npm i -g @angular/cli@next

The version I used is:6.0.0-rc.10

 

2. Create a new application:

of new cdk-demo --routing

 

3. Install material and cdk packages:

Here need to add @next, because by the time I tried the application, v6 angular is not released yet.

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

 

4. Using 'ng add' to add material to the application:

of add @angular/material

This command did some changes to the project, add some necessary code and files, which makes the whole process lot easier.

 

5. Update some code:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatCheckboxModule } from '@angular/material'; // <-- added

@NgModule ({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatCheckboxModule, // <-- added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<mat-checkbox>Toggle</mat-checkbox>

Then you should be able to see a toggle element on the page.

The progress was much better than before.

 

But even more awesome stuff is the following.

 

6. Genearte a material based component by using cli:

of g @angular/material: materialNav --name = main-nav

Then just use it in the app.component.html:

<main-nav></main-nav>

 

We can also do:

ng g @angular/material:material-table --name=main-table
ng g @angular/material:material-dashboard --name=main-dash

Then use it inside the main-nav we have just created:<mat-sidenav-container class="sidenav-container">

  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="isHandset ? 'dialog' : 'navigation'"
    [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
    [opened]="!(isHandset | async)!.matches">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isHandset | async)!.matches">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>

    <main-dash></main-dash> <!--  added -->


  </mat-sidenav-content>
</mat-sidenav-container>