はじめに

Angular のチュートリアルを終えて、簡単なアプリケーションの Showcase のようなものを Firebase 上に運用しています。
今回は Topページを作成する中で ngForってネストできたっけ。と考えることがあったのでまとめます。

fir-angular-showcase.web.app

angular showcase

Angular でngFor をネストさせる

ngFor はネスト（ngForの中でngForを利用することが）できます。
例えば以下のように1つのtitleに複数のpageが入るようなネストされたInterfaceを準備します。

export interface Content {
  title: string;
  icon?: string;
  svgIcon?: string;
  pages: Page[];
}
export interface Page {
  icon?: string;
  svgIcon?: string;
  page_title: string;
  url: string;
}

contents: Content[] = [
    {
      title: 'Angular', svgIcon: 'angular', pages: [
        {icon: 'input', page_title: 'Form & Validation', url: '/form-validation'},
        {icon: 'insert_drive_file', page_title: 'File', url: '/file'},
        {icon: 'view_quilt', page_title: 'Lean Canvas', url: '/leancanvas'}
      ]
    },
    {
      title: 'Camera & Microphone', icon: 'camera_alt', pages: [
        {icon: 'camera_alt', page_title: 'Audio & Video', url: '/camera-microphone'},
        {icon: 'videocam', page_title: 'Real-time Communication', url: '/top'},
      ]
    }
  ];

*ngFor="let content of contents" 内で {{ content.KEY }} と書くことで外側の interface Content の値が取得できます。
また *ngFor="let content of contents" 内で *ngFor="let page of content.pages" とすることで interface Page の値が取得できます。

<div fxLayout="row wrap">
  <div fxFlex.xs="100" fxFlex.sm="50" fxFlex="33" *ngFor="let content of contents">
    <mat-grid-list cols="1" rowHeight="3:2">
      <mat-grid-tile>

        <mat-card class="card">

          <mat-card-header class="card-header">
            <mat-card-title fxFlex="100" fxLayoutAlign="start center">
              <mat-icon color="primary" class="list-icon" svgIcon="{{ content.svgIcon }}">{{ content.icon }}</mat-icon>
              {{ content.title }}
            </mat-card-title>
          </mat-card-header>

          <mat-list>
            <mat-list-item class="top-list" *ngFor="let page of content.pages" routerLink="/{{page.url}}">
              <mat-icon color="primary" class="list-icon">{{ page.icon }}</mat-icon>
              {{ page.page_title }}
            </mat-list-item>
          </mat-list>

        </mat-card>

      </mat-grid-tile>
    </mat-grid-list>
  </div>
</div>

まとめ

Angular でngFor をネストさせることができました。
Githubはこちら

github.com