javascript - Angular Material - Collapse inactive steps of Stepper

I have a Stepper from @Angular/Material and it looks great. However, I see many example that have only the current step opened up. I would like this functionality. All inactive steps should be closed.

[EDIT]: Just added in the HTML and TS file.

Component HTML File

<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
   <mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
      <mat-tab label="Login">
         <form>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Username">
            </mat-form-field>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Password">
            </mat-form-field>
         </form>
         <button class="sameWidth" mat-raised-button color="primary">Login</button>
         <button class="sameWidth" mat-button color="primary">Forgot Password?</button>
      </mat-tab>
      <mat-tab label="Register">
         <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         <mat-vertical-stepper [linear]=true>
            <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 [active]="true" [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>
               </div>
            </mat-step>
         </mat-vertical-stepper>
         <!--<form>
            <table cellspacing="0">
               <tr>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="First Name">
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="Last name">
                     </mat-form-field>
                  </td>
               </tr>
            </table>
            <mat-form-field style="width:100%;">
               <input matInput  placeholder="Password">
            </mat-form-field>
            </form>-->
         <mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
         <button class="sameWidth" mat-raised-button color="primary">Register</button>
      </mat-tab>
   </mat-tab-group>
</mat-card-content>

Component TS File

import { Component, OnInit, ViewEncapsulation, Inject } from "@angular/core";
import {
    MatIconRegistry,
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/mon/http";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
    selector: "app-login",
    templateUrl: "loginponent.html",
    styleUrls: ["loginponent.css"]
})
export class LoginComponent {
    animal: string;
    name: string;

    constructor(
        private _formBuilder: FormBuilder,
        iconRegistry: MatIconRegistry,
        sanitizer: DomSanitizer,
        public dialog: MatDialog
    ) {
        iconRegistry.addSvgIcon(
            "close",
            sanitizer.bypassSecurityTrustResourceUrl(
                "assets/icons/ic_close_48px.svg"
            )
        );
    }

    openDialog(): void {
        let dialogRef = this.dialog.open(LoginDialogComponent, {
            width: "400px",
            data: { name: this.name, animal: this.animal }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log("The dialog was closed");
            this.animal = result;
        });
    }
}
@Component({
    selector: "dialog-login",
    templateUrl: "loginDialogponent.html",
    styleUrls: ["loginDialogponent.css"]
})
export class LoginDialogComponent {
    constructor(
        private _formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<LoginDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

    onNoClick(): void {
        this.dialogRef.close();
    }

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

My Current Status:

My Goal:

[EDIT]: Just added in the HTML and TS file.

Component HTML File

<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
   <mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
      <mat-tab label="Login">
         <form>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Username">
            </mat-form-field>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Password">
            </mat-form-field>
         </form>
         <button class="sameWidth" mat-raised-button color="primary">Login</button>
         <button class="sameWidth" mat-button color="primary">Forgot Password?</button>
      </mat-tab>
      <mat-tab label="Register">
         <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         <mat-vertical-stepper [linear]=true>
            <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 [active]="true" [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>
               </div>
            </mat-step>
         </mat-vertical-stepper>
         <!--<form>
            <table cellspacing="0">
               <tr>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="First Name">
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="Last name">
                     </mat-form-field>
                  </td>
               </tr>
            </table>
            <mat-form-field style="width:100%;">
               <input matInput  placeholder="Password">
            </mat-form-field>
            </form>-->
         <mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
         <button class="sameWidth" mat-raised-button color="primary">Register</button>
      </mat-tab>
   </mat-tab-group>
</mat-card-content>

Component TS File

import { Component, OnInit, ViewEncapsulation, Inject } from "@angular/core";
import {
    MatIconRegistry,
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/mon/http";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
    selector: "app-login",
    templateUrl: "login.ponent.html",
    styleUrls: ["login.ponent.css"]
})
export class LoginComponent {
    animal: string;
    name: string;

    constructor(
        private _formBuilder: FormBuilder,
        iconRegistry: MatIconRegistry,
        sanitizer: DomSanitizer,
        public dialog: MatDialog
    ) {
        iconRegistry.addSvgIcon(
            "close",
            sanitizer.bypassSecurityTrustResourceUrl(
                "assets/icons/ic_close_48px.svg"
            )
        );
    }

    openDialog(): void {
        let dialogRef = this.dialog.open(LoginDialogComponent, {
            width: "400px",
            data: { name: this.name, animal: this.animal }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log("The dialog was closed");
            this.animal = result;
        });
    }
}
@Component({
    selector: "dialog-login",
    templateUrl: "loginDialog.ponent.html",
    styleUrls: ["loginDialog.ponent.css"]
})
export class LoginDialogComponent {
    constructor(
        private _formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<LoginDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

    onNoClick(): void {
        this.dialogRef.close();
    }

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

My Current Status:

My Goal:

Share Improve this question edited Feb 6, 2018 at 16:48 asked Feb 5, 2018 at 3:05 Nicholas Johnson 1,0222 gold badges13 silver badges36 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

There is no official fix yet. I have submitted a bug-report and it is being looked into. For now I have researched and found a workaround for this issue. I had to add (selectionChange)="cambiaStep($event)" as an attribute to my <mat-vertical-stepper> tag. Then I had to add a <ng-container> under all of my <mat-step> tags. In each corresponding <ng-container>, I had to set an attribute based on which position it had in the stepper order. In each <ng-container> I had to add *ngIf="stepIndex === 0" but the 0 was based on its order in the steps (0: first, 1: second, 2: third, etc.)

My stepper ended up having code as such:

<mat-vertical-stepper (selectionChange)="cambiaStep($event)">
<mat-step>
    <ng-container *ngIf="stepIndex === 0">

    </ng-container>
</mat-step>
<mat-step>
    <ng-container *ngIf="stepIndex === 1">

    </ng-container>
</mat-step>
<mat-step >
    <ng-container *ngIf="stepIndex === 2">

    </ng-container>
</mat-step>
</mat-vertical-stepper>

I also had to add the event function in my ponent's *.ts file.

export class LoginDialogComponent {
    stepIndex: number = 0;
    cambiaStep(e) {
        this.stepIndex = e.selectedIndex;
    }

    constructor() {}
}

I just copy pasted your code in default angular-material stepper code and it's showing like your goal

https://stackblitz./edit/angular-tpeo6s?embed=1&file=app/stepper-overview-example.html

Edit

It seems angular material bug to me.

if stepper is put out of tabs, it is working but inside tab, though aria-expanded="false" for inactive steps , material is not adding style="height: 0px; visibility: hidden;" to hide inactive steps.

you can log issues related to angular material 2 HERE

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Angular Material - Collapse inactive steps of Stepper - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)