CODEWITHSUNDEEP
htmlcssangular-material
Gausmohammad Shaikh
Gausmohammad Shaikh

Reputation: 59

How to make mat-chips checked unchecked?

I am make mat-chips checked unchecked , but for specific area (only labels click) only click to checked unchecked work, now i want to click any where on mat-chips it is checked unchecked, below html code i am using. 

<mat-chip-list formControlName="sample">  
     <mat-chip  mat-raised-button>
         <div mat-card-avatar class=""></div>  
                  <input class="checkbox" type="checkbox" 
                        [checked]="checked" value="sample" 
                        id="sample" name="sample"> 
                  <label for="sample">sample</label>
        </mat-chip>
</mat-chip-list>

see my mat-chip

Upvotes: 2

Views: 4048

Answers (1)

Andre Kraemer
Andre Kraemer

Reputation: 2761

If I understand your question right, then you want to be able to click anywhere on the mat-chip to change the state of your checkbox.

As you're already binding the checked property of your input to a field called checked in your component, all you have to do is to register a click event handler on your mat-chip that modifies the field checked. In addition to that I changed the oneway checked binding to a two way binding. As there was an issue with multiple click events, I added (click)='$event.stopPropagation()' to the checkbox.

Something like this should work:

<mat-chip-list formControlName="sample"> 
 <mat-chip  mat-raised-button (click)="checked=!checked">
     <div mat-card-avatar class=""></div>  
              <input class="checkbox" type="checkbox" 
                      [(ngModel)]='checked'
                    id="sample" name="sample" (click)='$event.stopPropagation()'>
              <label for="sample">sample</label>
    </mat-chip>

Link to Stackblitz live example

Upvotes: 1

Related Questions