![](/img/trans.png)
[英]Angular Material: How to set each mat-horizontal-stepper stepper icon with different background color in TS
[英]How to set material stepper to open second item by default and set the icon color?(Angular Material)
我使用垂直材質的步進器,默認情況下要打開第二個項目。 現在,它打開第一個項目。 我想默認打開“填寫您的地址”。 為此,我使用了材質角。 因此,當我打開應用程序時,我想打開第二個項目並更改圖標顏色。 我附上了代碼。 我將不勝感激任何幫助。
HTML:
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
</button>
<mat-vertical-stepper [linear]="isLinear" #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-vertical-stepper>
TS:
import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
/**
* @title Stepper vertical
*/
@Component({
selector: 'stepper-vertical-example',
templateUrl: 'stepper-vertical-example.html',
styleUrls: ['stepper-vertical-example.css']
})
export class StepperVerticalExample implements OnInit {
isLinear = false;
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]
});
}
}
在步進器上將selectedIndex設置為1
HTML代碼
<mat-horizontal-stepper #stepper [selectedIndex]="1" (selectionChange)="stepChange($event)">
<!-- Your code -->
</mat-horizontal-stepper>
ts代碼
public selectedIndex: number;
public iconColor: stirng;
stepChange(event){
this.selectedIndex= event.selectedIndex;
if(event.selectedIndex === 0){
this.iconColor = 'your color';
}
}
要么
在要設置顏色的html中,您可以這樣
<mat-icon [color]="selectedIndex === 0 ? 'primary' : 'warn'"></mat-icon>
要么
<mat-icon [color]="getColor()"></mat-icon>
getColor(){
return selectedIndex === 0 ? 'primary' : 'warn'
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.