Angular PrimeNG avatar徽章

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式网站，非常方便。头像是用来表示不同形状和背景颜色的字母、图标和图像的。

这篇文章将告诉我们如何在Angular PrimeNG中使用不同的Avatar徽章。徽章可以分别应用于Avatar的图片或图标或字母内容。

方法：让我们创建一个Angular项目并安装PrimeNG UI模块。然后我们将创建一个UI，展示Angular PrimeNG Avatar Badge。

第1步：要创建一个angular应用程序，你需要通过npm命令在命令行界面安装angular。

npm install -g angular-cli

第2步：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的react项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：在运行上述步骤中提到的命令后，如果你在编辑器中打开项目，你可以看到如下所示的类似项目结构。用户所做的新组件或代码修改，我们将在源文件夹中完成。

Project Structure

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。

ng serve --open

例子1：我们正在创建一个显示Angular PrimeNG Label Avatar Badges的用户界面。

<div style="margin:100px">
    <h2 style="color: green;">GeeksforGeeks</h2>
    <h3>Angular PrimeNG Label Avatar Badges </h3>
    <div class="d-flex ai-center" style="margin:20px">
        <p-avatar label="G" size="xlarge" 
            pBadge value="30" severity="warning"
            [style]="{'background-color':'green', 
            'color': 'white', 'margin':'20px'}">
        </p-avatar>
        <p-avatar label="F" size="xlarge" 
            pBadge severity="info">
        </p-avatar>
        <p-avatar label="G" size="xlarge" 
            pBadge value="50" severity="danger"
            [style]="{'background-color':'green', 
            'color': 'white','margin':'20px'}">
        </p-avatar>
    </div>
</div>

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

输出：现在打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。

例子2：我们正在创建一个显示Angular PrimeNG Icon Avatar Badges的UI。

<div style="margin:100px">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h3>Angular PrimeNG Icon Avatar Badges </h3>
    <div class="d-flex ai-center" style="margin:20px">
        <p-avatar icon="pi pi-user" size="xlarge" 
            pBadge value="10" severity="info"
            [style]="{'background-color':'green', 
            'color': 'white', 'margin':'20px'}">
        </p-avatar>
        <p-avatar icon="pi pi-prime" size="xlarge" 
            pBadge severity="danger">
        </p-avatar>
        <p-avatar icon="pi pi-search" size="xlarge" 
            pBadge value="20" severity="warning"
            [style]="{'background-color':'black', 
            'color': 'white','margin':'20px'}">
        </p-avatar>
    </div>
</div>

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

输出：现在打开你的浏览器，进入http://localhost:3000/，你会看到以下输出。