Filter by day of the week in Angular Material table

I am trying to create a select dropdown where a user selects multiple days of the week and it filters the table to show only the rows that are selected for those days of the week. The filter is called Delivery Days. The data in the table row shows as 'Mo' for Monday, 'Tu' for Tuesday, etc . because that is how it will show in the database.

The delivery days will only be displayed for the expanded/children rows not the main row. So when filtering by delivery days it will only filter for the expanded rows because those are the rows that will show delivery days data.

This is the code that I added for the Delivery Days filter in HTML and typescript. I commented out the html for the select for days of the week because I'm getting a 'Template parse errors: Unexpected character "EOF"'. I'm not sure why I'm getting this error

html

<mat-select [formControl]="days" multiple>
<mat-select-trigger>
{{days.value?.[0] || ''}}
@if ((days.value?.length || 0) > 1) {
<span class="example-additional-selection">
(+{{(days.value?.length || 0) - 1}} {{days.value?.length === 2 ? 'other' : 'others'}})
</span>
}
</mat-select-trigger>
@for (topping of daysList; track day) {
<mat-option [value]="day">{{day}}</mat-option>
}
</mat-select>


ts

days = new FormControl('');

dayList: string[] = [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday',
];


Stackblitz demo

Continue reading...