Angular Materialを使ってダッシュボードを実装する

Angular MaterialのSchematicsを使って、３分でダッシュボードを実装する。

コマンドをいくつか叩く。

$ ng new schematics-sample
? Would you like to add Angular routing? Yes

$ ng add @angular/material
$ ng g @angular/material:address-form form
$ ng g @angular/material:nav nav
$ ng g @angular/material:table table
$ ng g @angular/material:dashboard dashboard
$ ng g @angular/material:tree tree

ファイルを３つだけ修正する。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';
import { FormComponent } from './form/form.component';
import { TableComponent } from './table/table.component';
import { TreeComponent } from './tree/tree.component';

const routes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'form', component: FormComponent },
  { path: 'table', component: TableComponent },
  { path: 'tree', component: TreeComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

nav.component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="!(isHandset$ | async)">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item [routerLink]="['/']">Top</a>
      <a mat-list-item [routerLink]="['/form']">Form</a>
      <a mat-list-item [routerLink]="['/table']">Table</a>
      <a mat-list-item [routerLink]="['/tree']">Tree</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">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>schematics-sample</span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

app.component.html

<app-nav>
  <router-outlet></router-outlet>
</app-nav>

ダッシュボードの実装完了です。