Значок чипа Angular PrimeNG

Опубликовано: 1 Января, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать значок Chips в Angular PrimeNG.

Компонент Chips устанавливает несколько значений для ввода в поле ввода.

Синтаксис:

<p-chip
     label="...."
     icon="..."
     [removable]="true">
</p-chip>

Свойства значка чипа Angular PrimeNG:

метка: используется для отображения текста внутри чипа.
съемный: используется для указания, должен ли отображаться съемный значок или нет. Он логического типа. Значение по умолчанию неверно.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: Это будет выглядеть следующим образом:

Запустите приведенную ниже команду, чтобы увидеть вывод:

ng serve --open

Пример 1. Ниже приведен пример кода, иллюстрирующий использование значка чипа Angular PrimeNG.

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Chips Icon</h5>
<div class="p-d-flex p-ai-center">
   <p-chip 
           label="WhatsApp" 
           styleClass="p-mr-3"
           icon="pi pi-whatsapp">
   </p-chip>
   <p-chip 
           label="Instagram" 
           styleClass="p-mr-3"
           icon="pi pi-instagram">
   </p-chip>
   <p-chip 
           label="LinkedIn" 
           styleClass="p-mr-3"
           icon="pi pi-linkedin">
   </p-chip>
   <p-chip 
           label="Slack"
           icon="pi pi-slack">
   </p-chip>
</div>

app.component.ts

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

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } 
   from "@angular/platform-browser";
import { BrowserAnimationsModule } 
   from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BadgeModule } from "primeng/badge";
import { ChipModule } from "primeng/chip";
  
@NgModule({
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   ChipModule,
   ButtonModule,
   BadgeModule
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule {}

Выход:

Пример 2. Ниже приведен еще один пример кода, иллюстрирующий значок чипа Angular PrimeNG с использованием свойства [removable]="true" .

app.component.html

<h2 style="color: green">GeeksforGeeks</h2>
<h5>Angular PrimeNG Chips Icon</h5>
<div class="p-d-flex p-ai-center">
   <p-chip 
           label="WhatsApp" 
           styleClass="p-mr-3"
           icon="pi pi-whatsapp"
           [removable]="true">
   </p-chip>
   <p-chip 
           label="Instagram" 
           styleClass="p-mr-3"
           icon="pi pi-instagram"
           [removable]="true">
   </p-chip>
   <p-chip 
           label="LinkedIn" 
           styleClass="p-mr-3"
           icon="pi pi-linkedin"
           [removable]="true">
   </p-chip>
   <p-chip 
           label="Slack"
           icon="pi pi-slack"
           [removable]="true">
   </p-chip>
</div>

app.component.ts

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

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } 
   from "@angular/platform-browser";
import { BrowserAnimationsModule } 
   from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { BadgeModule } from "primeng/badge";
import { ChipModule } from "primeng/chip";
  
@NgModule({
 imports: [
   BrowserModule,
   BrowserAnimationsModule,
   ChipModule,
   ButtonModule,
   BadgeModule
 ],
 declarations: [AppComponent],
 bootstrap: [AppComponent]
})
export class AppModule {}

Выход:

Ссылка: https://primefaces.org/primeng/chip

Picked HTML

Значок чипа Angular PrimeNG

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

РЕКОМЕНДУЕМЫЕ СТАТЬИ