[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:

ng 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:

ng 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:

ng 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>

巴特西

[Angular] Angular CDK Intro

最新文章

热门文章