CODEWITHSUNDEEP
angulartypescript
Pravu
Pravu

Reputation: 608

Mat Checkbox Not change when 'Y'

I'm using angular material . I using mat-checkbox. I got problem, When I got data 'N' from backed and when I click checked it, it change to 'Y' but from 'Y' to 'N' not change. This DEMO for your reference.

HTML

<mat-checkbox (change)="blocked = $event?'Y':'N'" color='primary' [ngModel]="blocked === 'Y'" > IS Blocked?</mat-checkbox>


<br><br>
checkbox is {{blocked}}

Component

blocked:any='N';

Upvotes: 0

Views: 1869

Answers (4)

Brahma
Brahma

Reputation: 1

Instead of:

<mat-checkbox (change)="blocked = $event?'Y':'N'" color='primary' [ngModel]="blocked === 'Y'" > IS Blocked?</mat-checkbox>

use:

<mat-checkbox (change)="blocked = $event.checked?'Y':'N'" color='primary' [ngModel]="blocked === 'Y'" > IS Blocked?</mat-checkbox>

Upvotes: 0

Eliseo
Eliseo

Reputation: 57939

if you use (change) you sould use $event.checked, see the docs

<mat-checkbox (change)="blocked = $event.checked?'Y':'N'" 
              [checked]="blocked === 'Y'" > IS Blocked?</mat-checkbox>

if you use (ngModelChange) you use $event

<mat-checkbox (ngModelChange)="blocked = $event?'Y':'N'" 
               [ngModel]="blocked === 'Y'" > IS Blocked?</mat-checkbox>

NOTE: I like use the pairs (ngModelChange)/[ngModel] or the pair (change)/[checked]

Upvotes: 1

Aman Gojariya
Aman Gojariya

Reputation: 1429

You may simply do

<mat-checkbox (change)="onChange($event)" color='primary' [ngModel]="blocked == 'Y' ? true : false" > IS Blocked?</mat-checkbox>

And in checkbox-overview-example.ts put below function.

onChange(event){
   this.blocked = event.checked ? 'Y' : 'N';
}

Hope this helps!

Upvotes: 3

Nicholas K
Nicholas K

Reputation: 15423

You may simply do:

<mat-checkbox (change)="blocked = !blocked" color='primary'> IS Blocked?</mat-checkbox>

checkbox is {{blocked ? 'N' : 'Y'}}

Upvotes: 2

Related Questions