Чтобы включить или отключить выбор компонента по нажатию кнопки в угловом материале

Question

Я использую выбранный компонент 2 раза для выбора времени, и я также добавил значок в качестве суффикса, чтобы сделать действия как добавить и отменить . Как показано на изображении ниже

когда я нажимаю значок отмены, он меняется, добавляя значок, как показано на рисунке ниже.

Вот код

HTML

 <mat-form-field class="no-line time">
                <mat-select  [(value)]="selectmonmor">
                  <mat-option *ngFor="let mondaymorning of mondaymornings"  [value]="mondaymorning.value">
                    {{mondaymorning.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field  class="no-line time">
                  <mat-select [(value)]="selectmoneve">
                    <mat-option *ngFor="let mondayevening of mondayevenings" [value]="mondayevening.value">
                      {{mondayevening.viewValue}}
                    </mat-option>
                  </mat-select>

  </mat-form-field>
   <button  mat-button  matSuffix mat-icon-button >
          <mat-icon (click)="toggleIcon()">{{icon}}</mat-icon>
    </button>

TS

  public icon = 'highlight_off';

   public toggleIcon() {
   if (this.icon === 'highlight_off') {
     this.icon = 'add_circle_outline';
   } else {
     this.icon = 'highlight_off';
     }
   }

Здесь при нажатии на значок i, e <mat-icon (click)="toggleIcon()">{{icon}}</mat-icon> значок отмены (i, e highlight_off ) он меняется, чтобы добавить значок (i, e add_circle_outline ) Теперь мне нужно отключите раскрывающийся список 2 ( выберите компоненты) при нажатии значка отмены, после чего значок изменится на добавить , при нажатии добавить выберите компонент, который необходимо включить. При серфинге я получил stackblitz ссылку тоже

но здесь действия по включению / отключению выполняются двумя отдельными кнопками с помощью функции 2 щелчка, но мне нужно, чтобы она выполнялась только одним значком. Как я могу это сделать?

Answer 1

Попробуй так:

DEMO

HTML:

<code><mat-toolbar color="primary">
    Angular Material 2 App
</mat-toolbar>
<div class="basic-container">

    <mat-form-field>
        <mat-select placeholder="Sample" [disabled]="selectDisabled">
            <mat-option *ngFor="let opt of [1, 2, 3, 4]" [value]="opt">
                Option {{ opt }}
            </mat-option>
        </mat-select>
    </mat-form-field>

    <button (click)="selectDisabled = !selectDisabled" mat-icon-button>
    <mat-icon >{{selectDisabled?'add': 'cancel'}}</mat-icon>
  </button>
    <pre>disabled: {{ selectDisabled }}