Angular PrimeNG的徽章指令

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到**Angular PrimeNG Badge Directive。

徽章组件被用作其他元素的指示器，如图标和头像。它通常与其他元素结合使用，以显示通知计数和状态信息。徽章指令可以用来将徽章应用于其他元素。

语法:

<i pBadge class="..." value="2"></i>

创建Angular应用程序并安装模块：。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：最后，在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Project Structure

例子1：在这个例子中，我们使用pBadge指令将徽章应用于图标。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG pBadge Directive</h3>
  
<i 
    class="pi pi-bell" 
    pBadge 
    value="10" 
    style="font-size: 20px; 
    margin-right: 20px;" >
</i>
  
<i 
    class="pi pi-user" 
    pBadge 
    value="7" 
    style="font-size: 20px; 
    margin-right: 20px;">
</i>
<i 
    class="pi pi-hashtag" 
    pBadge 
    value="4" 
    style="font-size: 20px; 
    margin-right: 20px;">
</i>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {
      
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
  
import { BadgeModule } from 'primeng/badge';
  
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BadgeModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

例子2：在这个例子中，我们使用pBadge指令来给头像应用徽章。

<h1 style="color:green">GeeksforGeeks</h1>
<h3>Angular PrimeNG pBadge Directive</h3>
  
<p-avatar 
    label="G" 
    pBadge 
    value="19" 
    severity="danger"
    class="mr-3">
</p-avatar>
<p-avatar 
    label="F" 
    pBadge 
    value="11"
    severity="warning" 
    class="mr-3">
</p-avatar>
<p-avatar 
    label="G" 
    pBadge 
    value="5">
</p-avatar>

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styles: []
})
export class AppComponent {
      
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
  
import { BadgeModule } from 'primeng/badge';
import { AvatarModule } from 'primeng/avatar';
  
@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        BadgeModule,
        AvatarModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出: