【Angular】Excelやスプレッドシートのような表を作ってみた②【mat-icon編】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
概要
この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。
今回はその記事の第2回目です。
少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。
・第2回 mat-icon編
・第5回 要素(div/input)切り替え(スタイルバインディング)編
完成形
実装した機能(?)紹介
・ネストがあるデータを表形式で表示
・mat-icon使用
・表1列目固定
・横スクロール
・リスト表示切り替え
・要素(div/input)の切り替え
・テキスト修正後、クラス追加(赤字切り替え)
mat-icon編
テーマ
今回はmat-iconの実装を行います。
前提
前回記事の続きになります。
型定義は省いています。
データ構成です。
今回はcolumn配列データの最初に「Camera」を追加します。
※見にくくてすみませんmm
+ data = { column: [ "Camera", "Name", "Gender", "Hobby" ] ,
person: [{
info: { info1: "loud", info2: "big" },
details: { Name: "Taro", Gender: "1", Hobby: "" }
},
{
info: { info1: "", info2: "" },
details: { Name: "Hanako", Gender: "2", Hobby: "" }
}]
}
コード
module.ts
+ import { MatIconModule } from '@angular/material/icon';
・・・・・・・・・
+ imports: [ MatIconModule ],
・・・・・・・・・
component.ts
+ import { DomSanitizer } from '@angular/platform-browser';
+ import { MatIconRegistry } from '@angular/material';
・・・・・・・・・
constructor(
+ private matIconRegistry: MatIconRegistry,
+ private domSanitizer: DomSanitizer
) {
+ this.matIconRegistry.addSvgIcon(
+ 'camera-icon',
+ this.domSanitizer.bypassSecurityTrustResourceUrl('dist/assets/camera_alt-24px.svg')
) ///アイコンダウンロードはこちらから
}
・・・・・・・・・
component.html
<mat-table [dataSource]="getData(data)">
+ <ng-container *ngFor="let column of data['column']; let i = index">
+ <ng-container *ngIf="i === 0; else elseColumn">
+ <ng-container [matColumnDef]="column">
+ <th mat-header-cell *matHeaderCellDef>画像表示</th>
+ <td mat-cell *matCellDef="let person">
+ <mat-icon svgIcon="camera-icon">
+ </td>
+ </ng-container>
+ </ng-container>
+ <ng-template #elseColumn>
<ng-container [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef>{{ column }}</th>
<td mat-cell *matCellDef="let person">
<input type='text' [(ngModel)]='person[column]'>
</td>
</ng-container>
+ </ng-template>
</ng-container>
<tr mat-header-row *matHeaderRowDef="data['column']"></tr>
<tr mat-row *matRowDef="let row; columns: data['column'];"></tr>
</mat-table>
ポイント
ポイントは以下の4つです。
・Column配列データの最初の値に「Camera」を追加する
・assetsファイルにsvgデータを格納する
・DomSanitizerでサニタイズを回避する
・ifとindexを利用して、列を「indexが0の列」と「それ以外の列」に分ける
・indexが0の列にmat-icon要素を追加し、コンポーネントで指定した「camera-icon」を挿入する
アイコンのsvgデータはこちらから入手可能です。
Icons - Material Design
今後に向けて
次回は少しデザインを整えていきます。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library