Construir un MatStepper usando material angular

En esta ocasión les traigo como construir un paso a paso (MatStepper) para nuestros proyectos usando la librería angular material.
El paso a paso de Angular Material(MatStepper) proporciona un flujo de trabajo similar al de un instalador, al dividir el contenido en pasos lógicos. Bien vamos a crear nuestro primer paso a paso:

1. Procedemos a crear nuestra aplicacion de ejemplo:

ng new stepper-app 

Una vez creado nuestro proyecto procedemos a abrirlo usando nuestro editor de código de preferencia, en mi caso uso webstorm. Ahora procedemos a seguir nuestro tutorial anterior sobre como configurar Angular Material en tus proyectos.

nota: si les da problema la última versión de angular material realizar lo siguiente:

npm uninstall --save @angular/material @angular/cdk

y luego instalan la versión 7:

     npm install --save @angular/material@7 @angular/cdk@7

Luego de seguir el tutorial para instalar angular material en nuestro proyecto debemos importar en nuestro app.module.ts lo siguiente:


import { MatStepperModule, MatInputModule, MatButtonModule } from '@angular/material/stepper'; 

En nuestra sección de imports del app.module.ts agregamos lo siguiente :

 
@NgModule({
  ...
  imports: [ MatStepperModule, MatInputModule, MatButtonModule ]
  ...
})

Bien como se podrán dar de cuenta estamos importando MatInputModule y MatButtonModule pues los usaremos más adelante en los formularios de cada paso del Stepper , ahora vamos a nuestro app.component.html y agregamos el siguiente código de acuerdo a la documentación del componente:

<mat-horizontal-stepper #stepper>
  <mat-step [stepControl]="firstFormGroup">
    

<form [formGroup]="firstFormGroup">
         <ng-template matStepLabel>Fill out your name</ng-template>
         <mat-form-field>
         <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
        </mat-form-field>
      

<div>
        <button mat-button matStepperNext>Next</button>
      </div>


     </form>


  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
   

<form [formGroup]="secondFormGroup">
      <ng-template matStepLabel>Fill out your address</ng-template>
      <mat-form-field>
        <input matInput placeholder="Address" formControlName="secondCtrl" required>
      </mat-form-field>
      

<div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>


   </form>


  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Done</ng-template>
    You are now done.
    

<div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button (click)="stepper.reset()">Reset</button>
    </div>


  </mat-step>
</mat-horizontal-stepper>

Para solventar los errores de  Mat-form-field it’s not a known element y Can’t bind form group since isn’t a know property of forms vamos nuevamente a nuestro app.module.ts e importamos CUSTOM_ELEMENTS_SCHEMA y Reactive forms desde angular core de la siguiente manera:

   import { ReactiveFormsModule } from '@angular/forms';

   import { CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core'; 

y en la sección @NgModule agregar:


@NgModule({
    imports: [ ReactiveFormsModule ] , 
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})

abrimos nuestro app.component.ts e importamos lo siguiente ya que estamos trabajando con formularios reactivos:

import {FormBuilder, FormGroup, Validators} from '@angular/forms';

nuestro código del app.component.ts debe quedar de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  constructor(private _formBuilder: FormBuilder) {}

  ngOnInit() {
    this.firstFormGroup = this._formBuilder.group({
      firstCtrl: ['', Validators.required]
    });
    this.secondFormGroup = this._formBuilder.group({
      secondCtrl: ['', Validators.required]
    });
  }
}

Con esto ya tendríamos nuestro paso a paso (MatStepper) listo y configuradoes un componente muy atratactivo que podemoms usar en nuestras aplicaciones de angular.

El código de este ejemplo lo puedes descargar desde aqui

Leave a reply:

Your email address will not be published.

Site Footer