Componente de botón PrimeNG angular

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 Botón en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente botón: Se utiliza para hacer un botón estándar que indicará una posible acción del usuario.

Propiedades de pButton:

• etiqueta: Es el texto del botón. Es de tipo de datos de string y el valor predeterminado es nulo.  
• icono: Es el nombre del icono. Es de tipo de datos de string y el valor predeterminado es nulo.
• iconPos: Especifica la posición del icono, los valores válidos son “izquierda” y “derecha”. Es de tipo string y se deja el valor predeterminado.
• loading: Especifica si el botón está en estado de carga. Es de tipo de datos booleano y el valor predeterminado es falso
• loadingIcon: es un icono para mostrar en el estado de carga. Es de tipo string y el valor predeterminado es pi pi-spinner pi-spin.

Propiedades del botón p:

• type : Especifica los tipos del botón. Es de tipo string y el valor predeterminado es nulo.  
• etiqueta : Especifica el texto del botón. Es de tipo string y el valor predeterminado es nulo.  
• icon : Especifica el nombre del icono. Es de tipo string y el valor predeterminado es nulo.
• iconPos : Especifica la posición del icono, los valores válidos son “izquierda” y “derecha”. Es de tipo string y se deja el valor predeterminado.
• badge : Especifica el valor de la insignia. Es de tipo string y el valor predeterminado es nulo.
• badgeClass : Especifica la clase de estilo de la insignia. Es de tipo string y el valor predeterminado es nulo.
• loading : especifica si el botón está en estado de carga. Es de tipo booleano y el valor predeterminado es falso.
• loadingIcon : especifica el icono que se mostrará en el estado de carga. Es de tipo string y el valor predeterminado es pi pi-spinner pi-spin.
• disabled : especifica que el componente debe estar deshabilitado. Es de tipo booleano y el valor predeterminado es falso.
• style : Especifica el estilo en línea del elemento. Es de tipo string y el valor predeterminado es nulo.
• styleClass : Especifica la clase de estilo del elemento. Es de tipo string y el valor predeterminado es nulo.
• onClick : se utiliza para devolver la llamada para ejecutar cuando se hace clic en el botón. Es del tipo de evento y el valor predeterminado es nulo.
• onFocus : se usa para devolver la llamada para ejecutar cuando el botón está enfocado. Es del tipo de evento y el valor predeterminado es nulo.
• onBlur : se usa para devolver la llamada para ejecutar cuando el botón pierde el foco. Es del tipo de evento y el valor predeterminado es nulo.

Estilo:

• p-button: Es el elemento del botón.
• p-button-icon: Es el elemento icono.
• p-button-label: Es el elemento de etiqueta del botón.

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: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el Componente Botón. 

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Button Component</h5>
<button pButton pRipple label="Primary" 
  class="p-button-raised">
</button>
<button
  pButton
  pRipple
  label="Secondary"
  class="p-button-raised p-button-secondary">
</button>
<button
  pButton
  pRipple
  label="Success"
  class="p-button-raised p-button-success">
</button>
<button
  pButton
  pRipple
  label="Info"
  class="p-button-raised p-button-info">
</button>
<button
  pButton
  pRipple
  label="Warning"
  class="p-button-raised p-button-warning">
</button>
<button
  pButton
  pRipple
  label="Danger"
  class="p-button-raised p-button-danger">
</button>

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

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 { RippleModule } from "primeng/ripple";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ButtonModule, RippleModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar las diversas propiedades de clase disponibles en el Componente Botón.

<h2>GeeksforGeeks</h2>
<h5>PrimeNG Button Component</h5>
<h6>Small Outlined, Raised & Rounded Button</h6>
<button
  pButton
  pRipple
  label="Small button"
  class="p-button-raised p-button-sm p-button-rounded p-button-outlined">
</button>
<h6>Normal Raised & Rounded Button</h6>
<button
  pButton
  pRipple
  label="Normal button"
  class="p-button-raised p-button-success p-button-rounded">
</button>
<h6>Large,Text, Raised & Rounded Button</h6>
<button
  pButton
  pRipple
  label="Large button"
  class="
p-button-text p-button-raised p-button-warning p-button-lg p-button-rounded">
</button>

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

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 { RippleModule } from "primeng/ripple";
  
@NgModule({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            ButtonModule, RippleModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Producción:

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