События чипа Angular PrimeNG

Опубликовано: 24 Февраля, 2023

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

Компонент Chip представляет объекты с помощью текста, значков и изображений в четко определенной структуре. Для компонента чипа есть 2 события onRemove и onImageError .

События чипа Angular PrimeNG:

onRemove: это событие запускается, когда компонент чипа удаляется щелчком по значку удаления чипа.
onImageError: это событие запускается, когда изображение, указанное для чипа, не загружается.

Свойства событий чипа Angular PrimeNG:

метка: Это свойство используется для указания метки чипа.
image: Это свойство используется для указания изображения чипа.
съемный: это свойство указывает, является ли чип съемным или нет.

Синтаксис:

<p-chip 
    (Event-Name)="callbackFunction()"
    label="..." 
    [removable]="...">
</p-chip>

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

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

ng new appname

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

cd appname

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

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

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

Пример 1. В этом примере мы использовали событие чипа onImageError, и если изображение чипа не загружается, мы отправляем всплывающее сообщение на экран пользователя с помощью службы сообщений.

приложение.component.html:

HTML

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Events</h3>
  
<h4>The onImageError Event</h4>
<p-chip (onImageError)="imgError()"
        label="The Image Does not exist" 
        image="gfg.png">
</p-chip>
<p-toast></p-toast>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private msgService: MessageService) { }
  
    imgError() {
        this.msgService.add({
            severity: "error",
            summary: "Chip Image Failed to Load",
            detail: "The Chip onImageError Event"
        })
    }
}

app.module.ts:

Javascript

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

Выход:

Пример 2. В этом примере мы использовали событие чипа onRemove для отображения всплывающего сообщения при удалении чипа.

приложение.component.html:

HTML

<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Angular PrimeNG Chip Events</h3>
  
<h4>The onRemove Event</h4>
<p-chip (onRemove)="chipRemove()" 
        label="Chip 1" 
        class="mr-3" 
        [removable]="true">
</p-chip>
  
<p-chip (onRemove)="chipRemove()" 
        label="Chip 2" 
        class="mr-3" 
        [removable]="true">
</p-chip>
  
<p-chip (onRemove)="chipRemove()" 
        label="Chip 3" 
        class="mr-3" 
        [removable]="true">
</p-chip>
  
<p-chip (onRemove)="chipRemove()" 
        label="Chip 4" 
        [removable]="true">
</p-chip>
<p-toast></p-toast>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { MessageService } from "primeng/api"
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"],
    providers: [MessageService]
})
  
export class AppComponent {
    constructor(private msgService: MessageService) { }
  
    chipRemove() {
        this.msgService.add({
            severity: "error",
            summary: "Chip Removed",
            detail: "The Chip onRemove Event"
        })
    }
}

app.module.ts:

Javascript

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

Выход:

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

Technical Scripter Picked AngularJS

События чипа Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

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