Как реализовать угловой материал взаимоисключающих проверяемых пунктов меню?

Question

Все примеры, которые я нашел, имеют кнопки с меткой или значком и меткой в ​​качестве пунктов меню.Есть ли простой способ сделать пример, приведенный ниже, взятый из page ?, но это кажется действительно громоздким способом сделать это.

TS

  icon1 = 'check'
  icon2 = undefined;

  onOptionClick(parameter : string) {
    if (parameter === 'option1') {
      this.icon1 = 'check';
      this.icon2 = undefined;
    }
    else {
      this.icon1 = undefined;
      this.icon2 = 'check';
    }
  }

HTML

  <button #option1 mat-menu-item (click)="onOptionClick('option1')">
    <mat-icon>{{icon1}}</mat-icon>
    <span>option1</span>
  </button>
  <button #option2 mat-menu-item (click)="onOptionClick('option2')">
    <mat-icon>{{icon2}}</mat-icon>
    <span>option2</span>
  </button>

Answer 1

Я создал небольшой StackBlitz о том, как я подхожу к этому.Я бы в основном использовал MatButtonToggleGroup и немного его настраивал.Оберните все это в пользовательский компонент, чтобы сделать его многократно используемым во всем приложении, и все готово: https://stackblitz.com/edit/angular-thkwnk

Очевидно, что у него довольно ограниченный дизайн, и вам придется расширять / адаптировать его к вашим потребностямЕсли вы нуждаетесь в значениях, отличных от меток для ваших параметров.