web-dev-qa-db-ja.com

Angularマテリアル-空のバッジ

現在、アプリケーションのメニューのボタンにバッジを追加していますが、これはすでに正常に機能しています。ユーザーがまだ見なければならない通知の数を次のように表示したいと思います。

<span matBadge="4" matBadgeColor="warn">Look at these notifications!</span>

ただし、携帯電話では、メニューはハンバーガーアイコンの後ろに隠れています。このアイコンの上に通知の数をユーザーに表示させたくありません。私は彼にいくつかあることを知ってもらいたいだけです。彼がメニューを開くと、さまざまなボタンに通知の数が記載されたバッジが表示されます。

私の問題は、空のバッジが常に隠されていることです。私はそれをこのように示すことができないようです：

<span matBadge="" matBadgeColor="warn">Look at these notifications!</span>

空のバッジを表示することはまったくできませんか？私は何かが足りないのですか、それともこの動作は仕様によるものですか？

angularangular-materialbadge
5
Alexander Moser

以下にcssを追加して、空のバッジを表示できます。

.mat-badge-hidden .mat-badge-content:empty {
  display: inline-block;
}

以下の例をご覧ください。

https://stackblitz.com/edit/angular-mat-badge-with-pipe

0
Lokesh Daiya

使用する [matBadgeHidden] = "true"matBadgeの可視性を動的に制御します。例：

<span [matBadgeHidden] = "commentCount == 0"  [matBadge]="commentCount" matBadgeColor="warn" matBadgeOverlap="false">Comments</span>
0
Aarji George