Unexpected token error in mat-checkbox angular

Question

<div *ngFor="let bellNotification of earlierBellNotifications">
    <mat-checkbox (change)="updateNotificationEventStatus(bellNotification.key, $event)"
      [(ngModel)]="bellNotification.status==='READ'" (click)="$event.stopPropagation()" class="md-18">
      <span class="wd-notification-event-checkbox" i18n>MARK AS READ</span>
    </mat-checkbox>
</div>

When trying to load page, I get the following error:

Uncaught Error: Template parse errors: Parser Error: Unexpected token '=' at column 33 in [bellNotification.status==='READ'=$event] in ng:///AppSharedModule/BellNotificationComponent.html@43:12 ("
][(ngModel)]="bellNotification.status==='READ'" (click)="$event.stopPropagation()" class="md-18"> "): ng:///AppSharedModule/BellNotificationComponent.html@43:12

I tried replacing it with a function from typescript, I still get similar error.

I tried replacing it with a value from typescript, it worked, but it cannot be dynamically updated as it just comes from ts and is not dependent on the for loop iterator.

Can somebody help me point out the mistake in the syntax I am using.

I am new to Angular. Reference links are greatly appreciated.

Answer 1

The conditional binding in [(ngModel)] expression will not work (I have never used like this)!

You can use [checked] attribute to check/uncheck the checkbox with the condition like:

<div *ngFor="let bellNotification of earlierBellNotifications">
    <mat-checkbox (change)="updateNotificationEventStatus(bellNotification.key, $event)"  
        \/\/\/
      [checked]="bellNotification.status === 'READ'" (click)="$event.stopPropagation()" class="md-18">
      <span class="wd-notification-event-checkbox" i18n>MARK AS READ</span>
    </mat-checkbox>
</div>

Working_Demo