Search code examples
angularangular-material

How to get value of mat-chip in Angular?


I'm trying to call a typescript function from an angular html page. I want to pass a parameter in the function. The parameter will be a boolean of whether or not a mat-chip is selected. I've googled it but can't find solution. Any ideas?

<mat-chip-list>
  <mat-chip [selected]="isActive">Active People<mat-chip>
  <mat-chip [selected]="!isActive">Inactive People<mat-chip>
<mat-chip-list>

<button mat-icon-button>
  <mat-icon aria-label="download" (click)="doSomething(value-of-chip1)">get_app</mat-icon>
</button>

Solution

  • Looks like you already have a variable, can't you pass that in?

    <mat-chip-list>
      <mat-chip [selected]="isActive">Active People<mat-chip>
      <mat-chip [selected]="!isActive">Inactive People<mat-chip>
    <mat-chip-list>
    
    <button mat-icon-button>
      <mat-icon aria-label="download" (click)="doSomething(isActive)">get_app</mat-icon>
    </button>