Componente de pasos 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 Steps en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código. 

Componente de paso : se utiliza para indicar o rastrear la finalización de una serie de procesos.

Propiedades:

• modelo : Es una array de elementos de menú. Es de un tipo de array de datos y el valor predeterminado es nulo.
• activeIndex : Es el índice del elemento activo. Acepta el número como tipo de datos de entrada y el valor predeterminado es 0.
• readonly : especifica si se puede hacer clic en los elementos o no. Es del tipo de datos booleano y el valor predeterminado es verdadero.
• style : Establece el estilo en línea del componente. Es del tipo de datos de string y el valor predeterminado es nulo.
• styleClass : Es la clase de estilo del componente. Es del tipo de datos de string y el valor predeterminado es nulo.

Eventos:

• activeIndexChange: es una devolución de llamada que se dispara cuando se selecciona el nuevo paso.

Estilo:

• p-steps: Es el elemento contenedor.
• p-steps-item: Es el elemento menuitem.
• p-steps-number: Es el número de elementos del menú.
• p-steps-title: Es la etiqueta de menuitem.

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 ilustra cómo usar el componente Pasos.

<h2>GeeksforGeeks</h2>
<h4>PrimeNG Steps Component</h4>
<p-steps [model]="geeks" 
    [(activeIndex)]="gfg" [readonly]="false">
</p-steps>

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  geeks: MenuItem[];
  gfg: number = 1;
  
  ngOnInit() {
    this.geeks = [
      { label: "PrimeNG" },
      { label: "AngularJS" },
      { label: "ReactJS" },
      { label: "HTML" },
    ];
  }
}

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

Producción:

Ejemplo 2: En este ejemplo, haremos el siguiente botón para navegar por el elemento en el componente de paso.

<h2>GeeksforGeeks</h2>
<h4>PrimeNG Steps Component</h4>
<p-steps
  [model]="[
    { label: 'DSA' },
    { label: 'Algorithm' },
    { label: 'Web Tech' },
    { label: 'Aptitude' }
  ]"
  [(activeIndex)]="gfg"
  [readonly]="true">
</p-steps><br />
<button (click)="chan()">Next</button>

import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {
  geeks: MenuItem[];
  gfg: number = 0;
  
  chan() {
    this.gfg += 1;
  }
  ngOnInit() {}
}

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

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/steps/confirmation