Выберите несколько кнопок с помощью angular

#angular #button #colors #background #angular9

#angular #кнопка #Цвет #фон #угловой 9 #angular9

Вопрос:

 <div *ngFor="let value of values">`
 <button>{{value}}</button>`
</div>

По щелчку мне нужно изменить цвет фона выбранных кнопок.

Ответ №1:

это просто другой способ, но создать директиву — подходящий способ, как в ответе Александра

 <div *ngFor="let value of values">
    <button #btn (click)="btn.classList.add('selected')">{{value}}</button>
</div>

если вы хотите переключить класс, используйте toggle вместо add

     <button #btn (click)="btn.classList.add('selected')">{{value}}</button>

демонстрация 🚀

1. Можем ли мы вернуться к обычному режиму при двойном щелчке.?

2. да, это возможно, но в этом случае лучше следовать ответу Александра, создав директиву

3. проверьте мой обновленный ответ, вы можете использовать toggle вместо add это переключит класс

Ответ №2:

создайте директиву с HostListener для события click
введите ElementRef amp; Renderer2
в методе прослушивателя хоста вызовите renderer2.addClass(this.elemenentRef, ‘класс с цветом для кнопки’)

Ответ №3:

 <mat-button-toggle-group multiple="true" appearance="legacy" name="fontStyle" aria-label="Font Style">
    <mat-button-toggle value="bold">Bold</mat-button-toggle>
    <mat-button-toggle value="italic">Italic</mat-button-toggle>
    <mat-button-toggle value="underline">Underline</mat-button-toggle>
  </mat-button-toggle-group>

Используйте

 multiple="true"

для опции множественного выбора

Демонстрационный URL: Демонстрация здесь

Ответ №4:

например, если вы хотите напечатать дни и добавить функциональность переключения, ваш HTML должен быть

 <div *ngFor="let day of weekDays; let i = index" style="display: inline-block;">
                                <button mat-mini-fab [color]="day.status ? 'primary' : ''" 
                                 (click)="ChangeWeekDayStatus(i)">
                                 {{day.text}}</button> amp;nbsp;</div>
                                                             </div>

и ваш файл .ts должен содержать массив

  weekDays: Week_Day[] = [
      {
        text: "MO",
        status: false
      }, {
        text: "TU",
        status: true
      }, {
        text: "WE",
        status: false
      }, {
        text: "TH",
        status: false
      }, {
        text: "FR",
        status: false
      }, {
        text: "SA",
        status: false
      }, {
        text: "SU",
        status: false
      }
    ];

и функция для управления переключением

  ChangeWeekDayStatus(index:number){
    this.weekDays[index].status=!this.weekDays[index].status;
  }