Angular Material中的matBadge

Angular Material是一个UI组件库，由Angular团队开发，用于构建桌面和移动Web应用程序的设计组件。为了安装它，我们需要在我们的项目中安装Angular，一旦你有了它，你可以输入下面的命令并可以下载它。

matBadge的主要用途和赋值是为了在文本或图像或图标上显示数字或状态。我们可以把它们作为一个通知图标数字指示器。

安装:

ng add @angular/material

步骤:

首先，使用上述命令安装角质材料。
完成安装后，在app.module.ts文件中从’@angular/material/badge’导入’MatBadgeModule’。
然后使用matBadge并指定一个数字，在任何文本或图像上显示。
我们还有其他属性，如matBadgeOverlap和matBadgeSize，以便定制徽章的大小和位置。
如果我们想改变主题，我们可以通过使用matBadgeColor属性来改变它。在angular中，我们有3个主题，它们是primary、accent和warning。
一旦完成了上述步骤，就可以服务或开始项目。

代码实现:

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { MatBadgeModule} from '@angular/material/badge'; 
import { MatIconModule} from '@angular/material/icon'; 
import { MatButtonModule} from '@angular/material/button'; 
  
@NgModule({
  imports:
  [ BrowserModule, 
    FormsModule,
    MatButtonModule, 
    MatBadgeModule,
    MatIconModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html:

<h3> Mat-Badge over a text</h3>
  
<p>
    <span matBadge="8" matBadgeOverlap="false">
        Text with a badge
    </span>
</p>
<hr>
  
<h3>
    Mat-Badge positioned left 
    and right over a Button
</h3>
  
<p>
    <button mat-raised-button color="primary"
        matBadge="8" matBadgePosition="before" 
        matBadgeColor="accent">
        Left badge Button with accent theme
    </button>
</p>
  
<p>
    <button mat-raised-button color="accent" 
        matBadge="8" matBadgePosition="after" 
        matBadgeColor="primary">
        Right badge button with primary theme
    </button>
</p>
<hr>
  
<h3> Mat-Badge over a icon</h3>
  
<p>
    <mat-icon matBadge="8" matBadgeColor="warn">
        home
    </mat-icon>
</p>

输出:

Angular Material中的matBadge