使用 angular 材料显示计数复选框

Question

I'm trying to display count when checkbox is checked in HTML using Angular Material.

When an user clicks on a checkbox, this one is selected with number 1 instead of a tick or a cross. If the user clicks again, the number 2 is displayed. Do you have an idea how can I achieve this? I didn't find any example on Google using Angular material...

Thank you

Answer 1

This is really just a number input with a user interface.

I would create a hidden number input that is bound to a property. The "checkbox" would display the data-bound property value, and would also increment the value on click.

<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" />

I would create this as a standalone component with an event emitter so that you can easily place multiple instances in the same component, but the implementation of that is outside the scope of this question.

You may also want to read up on the Angular forms ControlValueAccessor so that you can treat your component as a standard Reactive Forms control.

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