В приложениях Angular компонент mat-button-toggle из Angular Material Design предоставляет удобный способ реализации кнопок переключения. Одним из распространенных требований является предварительно выбранный переключатель кнопки или установка значения по умолчанию при визуализации компонента. В этой статье мы рассмотрим несколько методов достижения выбранной по умолчанию функциональности в mat-button-toggle. Для лучшего понимания каждый метод будет сопровождаться примером кода.

Метод 1: использование ngModel и ngModelChange

<mat-button-toggle-group [(ngModel)]="selectedOption" (ngModelChange)="onSelectionChange($event)">
  <mat-button-toggle value="option1">Option 1</mat-button-toggle>
  <mat-button-toggle value="option2">Option 2</mat-button-toggle>
  <mat-button-toggle value="option3">Option 3</mat-button-toggle>
</mat-button-toggle-group>

selectedOption: string = 'option2';
onSelectionChange(event: string) {
  console.log(event); // Handle selection change logic here
}

Метод 2: использование свойства [checked]

<mat-button-toggle [checked]="selectedOption === 'option1'" value="option1">Option 1</mat-button-toggle>
<mat-button-toggle [checked]="selectedOption === 'option2'" value="option2">Option 2</mat-button-toggle>
<mat-button-toggle [checked]="selectedOption === 'option3'" value="option3">Option 3</mat-button-toggle>

selectedOption: string = 'option2';

Метод 3: использование свойства [value] с ngModel

<mat-button-toggle-group [(ngModel)]="selectedOption">
  <mat-button-toggle [value]="'option1'">Option 1</mat-button-toggle>
  <mat-button-toggle [value]="'option2'">Option 2</mat-button-toggle>
  <mat-button-toggle [value]="'option3'">Option 3</mat-button-toggle>
</mat-button-toggle-group>

selectedOption: string = 'option2';

Метод 4. Использование реактивных форм

<form [formGroup]="form">
  <mat-button-toggle-group formControlName="selectedOption">
    <mat-button-toggle [value]="'option1'">Option 1</mat-button-toggle>
    <mat-button-toggle [value]="'option2'">Option 2</mat-button-toggle>
    <mat-button-toggle [value]="'option3'">Option 3</mat-button-toggle>
  </mat-button-toggle-group>
</form>

import { FormBuilder, FormGroup } from '@angular/forms';
form: FormGroup;
constructor(private formBuilder: FormBuilder) {
  this.form = this.formBuilder.group({
    selectedOption: ['option2'], // Set the default value here
  });
}

В этой статье мы рассмотрели различные методы реализации выбранной функциональности по умолчанию в компоненте mat-button-toggle. Используя такие методы, как ngModel, свойство [checked], свойство [value] с ngModel и реактивные формы, мы можем легко достичь этого требования в различных сценариях. Понимание этих методов позволит вам настроить и улучшить взаимодействие с пользователем ваших приложений Angular.