I am looking to create a custom filter for a list. Here is an example of the Array of Objects:
myList: [
{
"id": 1,
"title":"title",
"city":"city name",
"types":[
{
"id":1,
"name":"type 1 name"
},
{
"id":2,
"name":"type 2 name"
}
],
"properties": [
{
"id": 1,
"name": "prop 1 name"
},
{
"id": 2,
"name": "prop 2 name"
}
]
},
{
"id": 2,
"title":"title2",
"city"":"city name",
"types":[
{
"id":1,
"name":"type 1 name"
}
],
"properties": [
{
"id": 2,
"name": "prop 2 name"
},
{
"id": 3,
"name": "prop 3 name"
}
]
},
]
I have select fields with multiple options for city, type, and property.
<form *ngIf="filterForm" [formGroup]="filterForm">
<div class="row justify-content-start">
<div class="col-xl-3">
<mat-form-field appearance="outline">
<mat-label>Filter by city</mat-label>
<mat-select formControlName="filterCity" multiple="true">
<mat-option *ngFor="let city of cities" [value]="city.name">{{city.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-xl-3">
<mat-form-field appearance="outline">
<mat-label>Filter by type</mat-label>
<mat-select formControlName="filterAdType" multiple="true">
<mat-option *ngFor="let type of Types" [value]="type.name">{{type.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-xl-3">
<mat-form-field appearance="outline">
<mat-label>Filter by property</mat-label>
<mat-select formControlName="filterProperty" multiple="true">
<mat-option *ngFor="let prop of Properties" [value]="prop.name">{{prop.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
<div class="row">
<div class="col-xl-6 text-end">
<button mat-button color="primary" (click)='filterSet()'>set filters</button>
</div>
<div class="col-xl-6 text-start">
<button mat-button color="primary" (click)='clearFilters()'>clear filters</button>
</div>
</div>
</form>
The list is displayed in a table
<table class="table table-hover" *ngIf="myList.length > 0">
<thead>
<tr>
<!-- <th scope="col">#</th> -->
<th scope="col">Title</th>
<th scope="col">Type</th>
<th scope="col">Property</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of myList; let i = index">
<td>
<div>
<strong>{{item.title}}</strong>
</div>
</td>
<td>
<div *ngFor="let type of item.types">
{{type.name}}
</div>
</td>
<td>
<div *ngFor="let prop of item.property">
{{prop.name}}
</div>
</td>
<td>{{item.city}}</td>
</tr>
</tbody>
</table>
I am currently facing challenges with filtering the multiple selects, especially the properties and type arrays. The filterSet() function is currently empty.