Issue
I am trying filter a country list based on continents checked.
I believe the template side of things is in a good place:
ngOnInit() {
this.filteredCountries = this.countries;
this.selectedContinents.valueChanges.subscribe(selectedValue => {
this.filteredCountries = this.countries.filter(country => {
return this.selectedContinents.value?.includes(country.continent);
});
}
}
<mat-form-field class="country-code-dialog-search-container">
<input matInput (change)="onChangeContinentCheckBox()" placeholder="Filter by Continents" cdkFocusInitial>
<mat-select placeholder="Filter by Continents" multiple>
<mat-option *ngFor="let continent of getContinents()">{{continent}}</mat-option>
</mat-select>
</mat-form-field>
<section class="example-section" *ngFor="let country of filteredCountries">
<span class="example-list-section">
<mat-checkbox class="example-margin">
{{country.name}} ({{country.iso3}}) <span>{{country.emoji}}</span>
</mat-checkbox>
</span>
</section>
I have seen something like this:
<mat-options type="checkbox" *ngFor="let continent of getContinents() | selectedContinents">{{continent}}</mat-options>
And in the function:
onChangeContinentCheckBox() {
this.countries.filter('selectedCountries', function(country) {
return country.continent === /* logic for obtaining checked selection */
});
}
but that just breaks my application meaning that mat-form-field
no longer renders and the country name, ISO and emoji no longer renders either, so it's just an empty list of checkboxes rendering.
So here is an example of what I have on Stackblitz:
Solution
With a bit of modification you can use the FormControl
only for the select
of angular material, you then subscribe to it's valueChanges
and inside of that you can filter your countries
data, look at the comments in the code
Working example
https://stackblitz.com/edit/angular-qpxrkm?file=src/app/select-multiple-example.html
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
@Component({
selector: 'select-multiple-example',
templateUrl: 'select-multiple-example.html',
})
export class SelectMultipleExample implements OnInit{
//you need to create the FormControl that will hold the selections made on the dropdown
//this will be used to filter the countries
selectedContinent = new FormControl('');
continents: string[] = ['America','Antartica'];
countries: any[]=[{continent:'America', country:'USA'},{continent:'America', country:'Mexico'},{continent:'Antartica', country:'New Zeland'}];
filteredContries : any[] = [];
ngOnInit(){
//FormControls have a valueChanges that you can subscribe to and apply your filter
this.selectedContinent.valueChanges.subscribe(selectedValue=>{
this.filteredContries = this.countries.filter(c=>{
//FormControls have a `.value` that holds the selected(in this case) values,
//in this case it's an array of strings, that's why we use the `includes` to look a each
//of the countries continent
return this.selectedContinent.value?.includes(c.continent);
});
});
}
}
<mat-form-field appearance="fill">
<mat-label>Continents</mat-label>
<mat-select [formControl]="selectedContinent" multiple>
<mat-option *ngFor="let continent of continents" [value]="continent">{{continent}}</mat-option>
</mat-select>
</mat-form-field>
<code>
{{selectedContinent.value|json}}
</code>
<code>
{{filteredContries|json}}
</code>
Answered By - Juan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.