Угловой PrimeNG Tags

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

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

Компонент тега используется для создания тега для категоризации контента. Существуют различные цвета, которые используются для тегов , чтобы различать разные уровни серьезности для соответствующих цветов. Например, зеленый цвет обозначает успех , красный — опасность , желтый — предупреждение , а синий цвет может использоваться для обозначения основных действий или некоторой информации .

Свойства тегов Angular PrimeNG:

value: указывает значение, отображаемое внутри тега. Это строковый тип данных, значение по умолчанию равно null.
серьезность: указывает тип серьезности тега. Это строковый тип данных, значение по умолчанию равно null.
styleClass: определяет класс стиля компонента. Это строковый тип данных, значение по умолчанию равно null.

Синтаксис:

<p-tag 
    styleClass="...."
    severity="...." 
    value="....">
</p-tag>

Создание приложения 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

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Tags</h5>
    <p-tag styleClass="p-mr-3" 
           value="Primary Tags"> 
     </p-tag>
    <p-tag severity="success" 
           value="Success Tags"> 
     </p-tag>
</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 { TagModule } from "primeng/tag";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
              TagModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Выход:

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

app.component.html

<div style="text-align: center">
    <h2 style="color: green">GeeksforGeeks</h2>
    <h5>Angular PrimeNG Tags</h5>
    <p-tag styleClass="p-mr-3" 
           severity="info" 
           value="Info Tags"> 
    </p-tag>
    <p-tag styleClass="p-mr-3" 
           severity="warning" 
           value="Warning Tags"> 
    </p-tag>
    <p-tag severity="danger" 
           value="Danger Tags"> 
    </p-tag>
</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 { TagModule } from "primeng/tag";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
              TagModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Выход:

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

Picked AngularJS

Угловой PrimeNG Tags

app.component.html

app.component.ts

app.module.ts

app.component.html

app.component.ts

app.module.ts

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