Angularでバッジアイコンとそのバッジアイコンを動的に数量を変更させるにはどうすればいいんだろう…
この記事では、上記の悩みを解決します。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
今回実装する内容のイメージです。
以下のようにバッジアイコンがあるとします。
pickするボタンを押すと、先ほどのバッジアイコンも連動して動的に数量が変更される内容となります。
実際の動作を確認したい場合は、yoteiPickerというアプリで確認できます。
Angularでバッジアイコンを表示させる
まずはAngularでバッジアイコンを表示させてみましょう。
バッジアイコンを表示させるのに、Angular Materialを使うと便利です。
Angular Materialをインストールできているならば、以下のようにMatBadgeModuleをインポートすることしておきます。
import { MatBadgeModule } from '@angular/material/badge';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatBadgeModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }これでバッジアイコンを表示させる下準備が整ってたので、画面上に表示させます。
Angular Materialの公式にもサンプルコードがいくつかあるので、こちらを参考にすればある程度表示させる方法はわかるかと思います。なので、この記事では一部だけ紹介します。
バッジアイコンを表示させる上でよく使われるのは以下のようにアイコンと一体で使われるケースでしょう。
この場合は、以下のようなコードを書けばいいです。
<mat-icon class="icon" [matBadge]="3" matBadgeColor="warn">bookmark</mat-icon>matBadgeに数量を記載することで、バッジアイコンの数量を表示できます。
また、matBadgeColorを指定することで、バッジアイコンの色を指定できます。色にはwarnの他にもprimaryやaccentなどがあります。
またその他にもバッジアイコンはカスタム可能です。
<mat-icon class="icon" [matBadge]="3" matBadgeColor="warn" matBadgeSize = "large" matBadgePosition = "before">bookmark</mat-icon>matBadgeSizeは、バッジアイコンの表示サイズ、matBadgePositionはバッジアイコンの表示位置になります。
上記のコードを適用すると以下のようになります。
Angularでバッジアイコンの数量を動的に変更する
バッジアイコンの数量を表示できたところで、バッジアイコンの数量を動的に変更する方法を実装していきます。
といってもやり方は簡単です。
matBadgeの数字の部分を変数に置き換えるだけです。
実装例となります。
<mat-icon class="icon" [matBadge]="count" matBadgeColor="warn" (click)="goPickUp()">bookmark</mat-icon>[matBadge]=”3″としていた部分をcountにします。(変数名はなんでもいいです)
それと、AngularのライフサイクルであるngDoCheckを使用します。
import { Component, OnInit, DoCheck } from '@angular/core';
import { Yotei } from 'src/app/interface/yotei';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit, DoCheck {
public count: number;
public yotei: Yotei[];
constructor(
private router: Router,
) { }
ngDoCheck() {
this.feathYoteiPickLenght();
}
/**
* length数を取得する
*/
public feathYoteiPickLenght() {
this.yotei = this.storageService.getPickYoteiData();
const length = this.yotei.length;
this.count = length;
}
}コードを解説します。
AngularのライフサイクルであるngDoCheckは、値が変化する際にアクションを走らせたいときに使用します。
importにDoCheckを追加し、ngDoCheckの中に、バッジアイコンの数量を変更する関数であるfeathYoteiPickLenght()を記載します。
feathYoteiPickLenght関数の中ではthis.yoteiのlengthを取得し、countという変数に値を代入します。
そのcount変数をhtml側でバッジアイコンの数量として参照することで動的に値を変更することができます。
休日で空いた時間の暇つぶしを探せるアプリを公開しています。
コメント