Angular PrimeNG AvatarGroup的属性

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式网站，非常方便。头像是用来表示不同形状和背景颜色的字母、图标和图像的。本文将告诉我们如何在Angular PrimeNG中使用AvatarGroup的不同属性。

AvatarGroup组件被用来将头像分组。它为头像创建了一个容器，其显示属性被设置为flex，项目被排列在中心。

语法:

<p-avatarGroup  [styleClass]="'test'">
    <p-avatar 
          ...
    </p-avatar>
    ...
</p-avatarGroup>

AvatarGroup的属性：

• style。这里，在这种情况下，也是用来设置组件的内联风格。它是一个对象数据类型，默认值为null。
• styleClass。这里，在这种情况下，也是用来定义组件的风格类。它是字符串数据类型，默认值为空。

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

创建React项目：

第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：下面是一个例子代码，我们正在创建一个用户界面，显示头像组的在线造型属性。

• app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Properties for AvatarGroup</h3>
  
<p-avatarGroup  [style]="
    {
      'background-color':'black', 
      'color': 'green', 
      'width':'300px'
    }">
    <p-avatar 
        icon="pi pi-hashtag" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar 
        label="G" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar 
        label="F" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar 
        label="G" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar shape="circle" size="xlarge" image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png">
    </p-avatar>
</p-avatarGroup>

• app.component.ts:

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

• app.module.ts

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

输出 :

例子2 。我们正在创建一个用户界面，显示AvatarGroup的外部造型（styleClass）属性。

• app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h3>Angular PrimeNG Properties for AvatarGroup</h3>
  
<p-avatarGroup  [styleClass]="'test'">
    <p-avatar 
        icon="pi pi-hashtag" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar 
        label="G" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar 
        label="F" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar 
        label="G" shape="circle" size="xlarge">
    </p-avatar>
  
    <p-avatar shape="circle" size="xlarge" image=
"https://media.geeksforgeeks.org/wp-content/uploads/20220907004414/gfglogo.png">
    </p-avatar>
</p-avatarGroup>

• app.component.ts:

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

• app.module.ts:

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

• app.component.css:

/* Write CSS Here */
::ng-deep .test {
    background-color: grey;
    color: green;
    width: 375px;
}

输出: