Material Angular 7 – Stepper

La,  <mat-stepper> una Directiva Angular, se utiliza para crear un asistente como pasos de flujo de trabajo.

En este capítulo, mostraremos la configuración requerida para dibujar un control de paso usando Material Angular.

Crear aplicación angular

Siga los siguientes pasos para actualizar la aplicación Angular que creamos en Angular 6 – capítulo Configuración del proyecto –

StepDescription
1Cree un proyecto con un nombre materialApp como se explica en el capítulo Angular 6 – Configuración del proyecto
2Modifique app.module.ts, app.component.ts, app.component.css y app.component.html como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de módulo modificado app.module.ts .

Previamente no traducimos el módulo de navegación desde el módulo de navegación de la plataforma de la página web, sino que lo importamos desde el módulo de navegación de la plataforma de la página web de la página web de la compañía

.componente{apos; importación{Módulo{de{navegadorAnimacionesModulo}de&apositivos;@angular/plataforma-browser/animaciones&apos; importación{MóduloMatStepperModule,MatInputModule,MatButtonModule}de&apos;@angular/material&apos;importación{ModuloFormmsModule,ReactiveFormsModule}de&aposotros;@angular/formas&apos;;@Module(@ModuloG)
declaraciones:[AppComponent],
importaciones:[BrowserModule,BrowserAnimationsModule,MatStepperModule,MatInputModule,MatButtonModule,FormsModule,ReactiveFormsModule],
proveedores:[],
bootstrap:[AppComponent]})exportclassAppModule{}&lt;/pre&gt;

A continuación se muestra el contenido del archivo host HTML modificado app.component.html .

Pre notranslate prettyprinted pretty&quot;&gt;[linear] =&quot;isLineal&quot;isLineal&quot;#stepper&gt;[stepControl] =&quot;firstFormGroup&quot;=&quot;firstFormGroup&quot;matStepLabel&gt;Ingrese su nombreIntroduzca su nombreInsumoPlaceholder=&quot;Apellido, Nombre&quot; nombre&quot;formControlName=&quot;firstCtrl&quot;requiredmat-buttonmatStepperNext&gt;Next[stepControl] =&quot;secondFormGroup&quot;&gt;[formGroup] =&quot;secondFormGroup&quot;matStepLabel&gt;Introduzca su direcciónInputplaceholder=&quot;Dirección&quot;formControlName=&quot;secondCtrl&quot;required&gt;mat-buttonmatStepperPrevious&gt;Backmat-buttonmatStepperNext&gt;NextmatStepLabel&gt;Done
Detalles tomados.
mat-buttonmatStepperPrevious Backmat-button (click) =&quot;stepper.reset()&quot;Reset&lt;/pre&gt;

A continuación se muestra el contenido del archivo ts modificado app.component.ts .

pre notranslate prettyprinted pretty&quot;import{Component}from&apos;@angular/core&apos; import{FormControl}from&quot;@angular/forms&quot;import{FormGroup}from&quot;@angular/forms&quot;import{FormBuilder}from&quot;import{FormBuilder}from&quot;@angular/forms&quot;import{Validators}from{Validators}from/forms&quot;:cadena;
display:cadena;}@Componente({
selector:&apos;app-root&apos;,
templateUrl:&apos;./app.component.html&apos;,
styleUrls:[&apos;./app.component.css&apos;]})exportclassAppComponent{
título =&apos;materialApp&apos;;
firstFormGroup:FormGroup;
secondFormGroup:FormGroup;constructor(privado _formBuilder:FormBuilder){}
ngOnInit(){este.firstFormGroup =este._grupo.formBuilder.group({ {)
firstCtrl:[&apos;&apos;&apos;,Validators.required]});este.segundoGrupoForm =este._grupo._formBuilder.group({ {})
secondCtrl:[&apos;&apos;,Validators.required]});}}}&lt;/pre&gt;

Resultado

Verifique el resultado.

Detalles

  • En primer lugar, hemos creado stepper usando mat-stepper.
  • Luego, hemos añadido contenido usando mat-step.