Componente paso a paso de Angular MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario angular basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar. En este artículo, sabremos cómo usar el componente paso a paso en Angular MDBootstap. El componente paso a paso se utiliza para representar el contenido en pasos o hitos. Cada paso seguido está separado y conectado con los botones.

Propiedades:

• disabledWaves: permite al usuario alternar los efectos de ondas.
• lineal: permite al usuario alternar el modo lineal.
• vertical: Permite al usuario cambiar la orientación del paso a paso a vertical.

Sintaxis:

<ul class="stepper stepper-horizontal">
  <li class="completed">
      <span>GeeksforGeeks</span>
  </li>
</ul>

Acercarse:

• Descarga Angular MDBootstrap desde el sitio oficial .
• Extraiga los archivos al directorio de trabajo actual.
• Instale npm en el proyecto actual usando el siguiente comando:

npm install

• 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

• Inicie el servidor con el siguiente comando:

ng serve

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

Estructura del proyecto

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Stepper en Angular MDBootstrap.

aplicación.componente.html

aplicación.componente.ts

aplicación.módulo.ts

Producción:

Componente paso a paso horizontal MDBootstrap angular

Ejemplo 2: Este ejemplo ilustra cómo hacer un componente paso a paso vertical en Angular MDBootstrap.

aplicación.componente.html

aplicación.componente.ts

• aplicación.módulo.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
 
import { AppComponent } from './app.component';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { FormsModule } from '@angular/forms';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule{}

Producción:

Componente paso a paso vertical MDBootstrap angular

Referencia: https://mdbootstrap.com/docs/angular/components/stepper