Using ES6 Map as an input for angular material checkbox throws Parse errors

Question

I am trying to use my Enum definition in my component and in my templates,

Angular Version - 7 Angular material - 7

I have the following enum defined,

export enum Status {
  NEW = 1,
  IN_PROGRESS,
  COMPLETED
}

and the below is the simplified component code

// Component definitions ignored here

public statusOptions = Status;
public statusFilters: Map<Status, boolean> = new Map([
  [Status.NEW, true],
  [Status.IN_PROGRESS, true],
  [Status.COMPLETED, false],
]);

I am trying to use the statusFilters map in my template for angular material checkbox checked/unchecked state like below

<mat-checkbox
  [(checked)]="statusFilters.get(statusOptions.NEW)"
  (change)="onStatusChange(statusOptions.NEW, $event)"
  [disabled]="isDisabled('new')"
  >New</mat-checkbox>

But it throws parse errors like below

Can anyone let me know what I am doing wrong and how I can use the map properly with the material checkbox?

Please let me know if you require any additional details and forgive me for posting the error as screenshot rather than text, I couldn't copy from my tmux+zsh terminal setup.

Answer 1

Issue with attribute checked which is not @output for mat-checkbox. Its just an Input. So you should remove the brackets ( ) from it.

<mat-checkbox
  [checked]="statusFilters.get(statusOptions.NEW)"
  (change)="onStatusChange(statusOptions.NEW, $event)"
  [disabled]="isDisabled('new')"
  >New</mat-checkbox>

Refer this api - https://material.angular.io/components/checkbox/api

Working copy is here - https://stackblitz.com/edit/material-design-angular-checkbox-wqgvqg

Answer 2

You are looking for text instead of integer.

public statusFilters: Map<Status, boolean> = new Map([
  [Status[Status.NEW], true],
  [Status[Status.IN_PROGRESS], true],
  [Status[Status.COMPLETED], false],
]);