Показать флажок установлен с angular материал

Question

Я пытаюсь отобразить счетчик, когда флажок установлен в HTML с использованием Angular Материал.

Когда пользователь нажимает флажок, этот выбирается с номером 1 вместо галочки или крест Если пользователь нажимает снова, отображается номер 2. У вас есть идея, как мне этого добиться? Я не нашел ни одного примера в Google, используя Angular материал ...

Спасибо

Answer 1

Это действительно просто ввод числа с пользовательским интерфейсом.

Я бы создал скрытый ввод числа, привязанный к свойству. «Флажок» будет отображать значение свойства с привязкой к данным, а также будет увеличивать значение при щелчке.

<div class="checkbox" [class.checked]="value > 0" (click)="value = value + 1">
  <span *ngIf="value > 0">{{value}}</span>
  <span *ngIf="!value">&nbsp;</span>
</div>
<input type="number" hidden [(ngModel)]="value" />

Я бы создал его как отдельный компонент с источником событий, чтобы вы могли легко разместить несколько экземпляры в том же компоненте, но реализация этого выходит за рамки этого вопроса.

Вы также можете прочитать формы Angular ControlValueAccessor , чтобы можно было рассматривать ваш компонент как стандартный элемент управления Reactive Forms.

DEMO: https://stackblitz.com/edit/angular-ufjjkd