大田区から発信するゆるゆる日記

主にITエンジニアに関する備忘録日記。たまに趣味も。何か不備があればコメント頂けると幸いです。Twitterアカウント https://twitter.com/ryuzan03

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

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

【目次】

 

概要

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

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

 

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

 

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

 

第1回 mat-table編

第2回 mat-icon編

第3回 デザイン修正編

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

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

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

 

完成形

Excel スプレッドシート

実装した機能(?)紹介

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

・mat-icon使用

・表1列目固定

・横スクロール

・リスト表示切り替え

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

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

 

  

mat-button-toggle-group編

テーマ

今回はmat-button-toggle-groupを使って、リスト表示の切り替え機能を実装していきます。

コード量が一気に多くなります。

mat-button-toggle-group

 

前提

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

URL

 

型定義は省いています。

 

データ構成です。

今回はcolumnの種類を増やしています。

※雑なcolumnの追加と見にくさはお許しくださいmm

 data = { column: [ "Camera", "Name", "Gender", "Hobby" ],
+ left_column: [ "FirstName", "Hobby2"],
+ right_column: [ "LastName", "Hobby3"],
person: [{
info: { info1: "loud", info2: "big" },
+ details: { Name: "Taro", Gender: "1", Hobby: "", FirstName: "Taro", LastName: "Tanaka", Hobby2: "", Hobby3: "" }
},
{
info: { info1: "", info2: "" },
+ details: { Name: "Hanako", Gender: "2", Hobby: "", FirstName: "Hanako", LastName: "Yamada", Hobby2: "", Hobby3: "" }
}]
}

 

コード

module.ts

+ import { MatButtonToggleModule } from '@angular/material/button-toggle';

・・・・・・・・・

imports: [
+ MatButtonToggleModule
],

・・・・・・・・・

  

component.html

+ <div class="contents">
+ <mat-button-toggle-group #group="matButtonToggleGroup">
+ <mat-button-toggle value="left_column" checked="true" aria-label="Text align left" class="product-button">
+ <mat-icon class="product-icon">ああ</mat-icon>
+ </mat-button-toggle>
+ <mat-button-toggle value="right_column" aria-label="Text align right" class="product-button">
+ <mat-icon class="product-icon">あああ</mat-icon>
+ </mat-button-toggle>
+ </mat-button-toggle-group>
+ </div>

<div class="person-table">
・・・・・・
</div>

+ <div class="right-person-table">
+ <mat-table [dataSource]="getData(data)">
+ <ng-container *ngFor="let column of data[group.value]">
+ <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-container>
+ <tr mat-header-row *matHeaderRowDef="data[group.value]"></tr>
+ <tr mat-row *matRowDef="let row; columns: data[group.value];"></tr>
+ </mat-table>
+ </div>

 

ポイント

ポイントは以下の3つです。

 

・mat-button-toggle要素のvalue属性に、表示させるリストの列名が入っている配列オブジェクトのキー(今回はleft_columnとright_column)を指定する

・mat-button-toggle-group要素で定義したローカル変数(group)を利用し、mat-header-row要素とmat-row要素に上記のキーを代入する

・描画時に出しておきたいリストが決まっている場合は、そのリストのキーを定義しているmat-button-toggle要素に「checked="true"」を追加する

 

 

今後に向けて

次回は要素(div/input)の切り替えを行います。

通常はindexを使うと思いますが、複数テーブルを作成してindexだけでは切り替える要素の指定ができない場合の要素切り替えを行います。

 

 

参考

素晴らしい記事に感謝いたします。

Angular Material UI component library(mat-table)

Angular Material UI component library(mat-button-toggle)