Componente de etiqueta angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente de etiqueta en Angular PrimeNG.

componente de etiqueta: Se utiliza para hacer una etiqueta con el fin de categorizar el contenido.

Propiedades:

• value : Especifica el valor a mostrar dentro de la etiqueta. Es de tipo de datos de string, el valor predeterminado es nulo.
• severidad : Especifica el tipo de severidad de la etiqueta. Es de tipo de datos de string, el valor predeterminado es nulo.
• redondeado : Especifica si las esquinas de la etiqueta son redondeadas o no. Es del tipo de dato booleano, el valor por defecto es falso.
• icon : Establece el icono de la etiqueta para mostrar al lado del valor. Es de tipo de datos de string, el valor predeterminado es nulo.
• style : Especifica el estilo en línea del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass : Especifica la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.

Estilo:

• p-tag: Es un elemento de etiqueta.
• p-tag-rounded: Se utiliza para hacer los elementos de forma redondeada.
• p-tag-icon: Es un icono de etiqueta.
• p-tag-value: Es un valor de la etiqueta.

Creación de aplicaciones angulares e instalación de módulos:

Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto : después de la instalación completa, tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el componente de etiqueta.

<h2>GeeksforGeeks</h2>
<h5>PrimeNg Tag Component</h5>
<p-tag styleClass="p-mr-2" value="Tag1" 
       icon="pi pi-check"></p-tag>
<p-tag styleClass="p-mr-2" value="Tag2" 
       icon="pi pi-bars" severity="success"></p-tag>
<p-tag styleClass="p-mr-2" value="Tag3" 
       icon="pi pi-info" severity="info"></p-tag>
<p-tag styleClass="p-mr-2" value="Tag4" 
       icon="pi pi-times" severity="danger"></p-tag>
<p-tag styleClass="p-mr-2" value="Tag5" 
       icon="pi pi-thumbs-up" severity="warning"></p-tag>

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 {}

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

Producción:

Ejemplo 2: En este ejemplo, usaremos la propiedad redondeada en el componente de etiqueta.

<h2>GeeksforGeeks</h2>
<h5>PrimeNg Tag Component</h5>
<p-tag styleClass="p-mr-2" value="Check" rounded='true' 
       icon="pi pi-check" severity="success"></p-tag>
<p-tag styleClass="p-mr-2" value="Info" rounded='true' 
       icon="pi pi-info"></p-tag>
<p-tag styleClass="p-mr-2" value="Bars" rounded='true' 
       icon="pi pi-bars" severity="danger"></p-tag>
<p-tag styleClass="p-mr-2" value="Thumbs Up" rounded='true' 
       icon="pi pi-thumbs-up" severity="warning"></p-tag>
<p-tag styleClass="p-mr-2" value="Cross" rounded='true' 
       icon="pi pi-times" severity="info"></p-tag>

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 {}

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

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/tag