【Angular】Excelやスプレッドシートのような表を作ってみた②【mat-icon編】

※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。

【目次】

概要
- 実装した機能(?)紹介
mat-icon編
今後に向けて
参考

概要

この度、作りたかった表が完成したので、その作業内容を数回に分けて記事にしていきます。

※Excel・スプレッドシートの足元にも及びません←

今回はその記事の第2回目です。

少し複雑なデータ構造をループで表示させて、さらにそのデータを個別に変更する処理の方法を知りたい方にオススメの記事です。

・第1回　mat-table編

・第2回　mat-icon編

・第3回　デザイン修正編

・第4回　mat-button-toggle-group編

・第5回　要素(div/input)切り替え(スタイルバインディング)編

・第6回　テキスト修正時のフォント色変更(クラス付与)編

完成形

Excel スプレッドシート

実装した機能(?)紹介

・ネストがあるデータを表形式で表示

・mat-icon使用

・表1列目固定

・横スクロール

・リスト表示切り替え

・要素(div/input)の切り替え

・テキスト修正後、クラス追加(赤字切り替え)

mat-icon編

テーマ

今回はmat-iconの実装を行います。

mat-icon

前提

前回記事の続きになります。

ryuzan03.hatenablog.com

型定義は省いています。

データ構成です。

今回は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>