Componente de insignia de 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 Badge en Angular PrimeNG.

Componente de credencial: Se utiliza para representar el texto como indicador de estado o el número como credencial.

Propiedades:

• value : Se utiliza para definir el valor a mostrar dentro de la credencial. Es de tipo de datos de string, el valor predeterminado es nulo.
• severidad : Se utiliza para establecer el tipo de severidad de la insignia. Es de tipo de datos de string, el valor predeterminado es nulo.
• size : Se utiliza para definir el tamaño de la credencial, las opciones válidas son “grande” y “xgrande”. Es de tipo de datos de string, el valor predeterminado es nulo.
• style : Se utiliza para establecer el estilo Inline del componente. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• styleClass : Se utiliza para definir la clase de estilo del componente. Es de tipo de datos de string, el valor predeterminado es nulo.

Estilo:

• p-badge : Es un elemento de insignia.
• p-overlay-badge : Es una insignia de envoltura y su objetivo.
• p-badge-dot : Es un elemento de insignia sin valor.
• p-badge-success: Es un elemento de insignia con severidad de éxito.
• p-badge-info: Es un elemento de insignia con severidad de información.
• p-badge-warning: Es un elemento de distintivo con gravedad de advertencia.
• p-badge-danger: Es un elemento de insignia con severidad de peligro.
• p-badge-lg: Es un elemento de insignia grande.
• p-badge-xl: Es un elemento de insignia extra grande.

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: Tendrá el siguiente aspecto.

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

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Badge Component</h5>
<div class="badges">
  <p-badge [value]="89" styleClass="p-mr-2" severity="success"></p-badge>
  <p-badge [value]="26" styleClass="p-mr-2" severity="info"></p-badge>
  <p-badge [value]="65" styleClass="p-mr-2"></p-badge>
  <p-badge [value]="33" styleClass="p-mr-2" severity="danger"></p-badge>
  <p-badge [value]="12" styleClass="p-mr-2" severity="warning"></p-badge>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { BadgeModule } from "primeng/badge";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            BadgeModule],
  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, sabremos cómo insertar un icono en el componente de mensaje.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Badge Component</h5>
<i
  class="pi pi-bars p-mr-3"
  pBadge
  style="font-size: 2rem"
  value="10"
  styleClass="p-mr-5">
</i>
<i
  class="pi pi-chevron-left p-mr-3"
  pBadge
  severity="danger"
  style="font-size: 2rem"
  value="34">
</i>
<i
  class="pi pi-chevron-right"
  pBadge
  severity="success"
  style="font-size: 2rem"
  value="47">
</i>

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";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BadgeModule,
    ButtonModule,
    BadgeModule,
  ],
  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/#/badge