Блог

У меня есть приложение Angular, в котором у пользователя есть несколько вариантов выбора кнопок, и при нажатии кнопки будет отображаться другой компонент. Компонент зависит от выбора пользователя. Одна вещь, которую я пытаюсь реализовать, — это оформление кнопок, чтобы было ясно, какой выбор был выбран.

 <div  fxLayout="row" fxLayoutAlign="space-between center" fxFill>
<div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        (click)="buttonPressed()"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>

<div  fxLayout="row" fxLayoutAlign="space-between center">
    <div *ngIf="item.hasSomeProperty | isTypeButton">
        <button mat-mini-fab (click)="buttonPressed()">
            <mat-icon>close</mat-icon>
        </button>
    </div>
</div>
 

Я также приложил изображение того, чего я пытаюсь достичь здесь:

Любая помощь будет высоко оценена.

Просто используйте [ngClass] или [ngStyle]:

 <div *ngFor="let button of buttons">
    <button
        mat-stroked-button
        *ngIf="button.type === 'button'"
        [ngClass]="{'disabledButton': !button.selected}"
        (click)="buttonPressed(button)"
        ngxScrollTo
    >
        {{ button.text }}
    </button>
</div>
 

Предполагая, что ваша модель кнопки содержит свойство «selected» (или у вас есть какая-то другая модель, хранящая информацию о том, какая кнопка была фактически нажата):

 buttonPressed(button: Button) {
    // Mark only button as selected
    this.buttons.forEach(b => b.selected = b === button);
}
 

И, конечно, добавьте некоторый класс в css:

 .disabledButton {
     opacity: 0.75;
}
 

Примечание — пишу это с головы до ног (поскольку стекблитц не был предоставлен), поэтому могут потребоваться некоторые корректировки.