Angular Parse Error: Got interpolation ({{}}) where expression was expected

Question

I have a list of objects that I would like to filter using chips. The template code looks like this...

  <mat-chip-list>
    <mat-chip selected="filterValue=='All'" (click)="filterBy('All')">All items</mat-chip>
    <mat-chip *ngFor="let item of items" selected="filterValue=='{{item.name}}'"
    (click)="filterBy(item.name)">
    {{item.name}}
    </mat-chip>
  </mat-chip-list>

I have a property in the component.ts called filterValue with the default value set to All and a method filterBy, that merely changes the value of filterValue when you click on a chip. What I expected to happen was that the selected attribute would evaluate the expression and return the appropriate value (either true or false). However, as it is currently, it always returns true.

If I were to surround the selected property with square brackets, then I get the error: [Angular] Parse Error: Got interpolation ({{}}) where expression was expected...

I've tried using [class.active]="filterValue=='{{item.name}}'" but that also returns [Angular] Parse Error: Got interpolation ({{}}) where expression was expected...

I know that {{}} never goes together with [prop]="..." or (event)="..." but I can't quite figure out how to solve my particular problem. I'd like to know how to use both the selected property of the mat-chip and also the [class.active] way of going about it. Your help would be greatly appreciated.