import { Component } from
'@angular/core'
;
import { MenuItem } from
'primeng/api'
;
import { SelectItem } from
'primeng/api'
;
import { SelectItemGroup } from
'primeng/api'
;
import { FilterService } from
'primeng/api'
;
import { CountryService } from
'./countryservice'
;
@Component({
selector:
'app-root'
,
templateUrl:
'./app.component.html'
,
providers: [CountryService, FilterService],
})
export class AppComponent {
selectedCountry: any;
countries: any[];
filteredCountries: any[];
selectedCountries: any[];
selectedCountryAdvanced: any[];
filteredBrands: any[];
groupedCities: SelectItemGroup[];
filteredGroups: any[];
constructor(
private countryService: CountryService,
private filterService: FilterService
) { }
ngOnInit() {
this
.countryService.getCountries().then((countries) => {
this
.countries = countries;
});
this
.groupedCities = [
{
label:
'India'
,
value:
'IND'
,
items: [
{ label:
'Mumbai'
, value:
'Berlin'
},
{ label:
'Goa'
, value:
'Frankfurt'
},
{ label:
'Varanasi'
, value:
'Hamburg'
},
{ label:
'Dadar'
, value:
'Munich'
},
],
},
];
}
filterCountry(event) {
let filtered: any[] = [];
let query = event.query;
for
(let i = 0; i <
this
.countries.length; i++) {
let country =
this
.countries[i];
if
(country.name.toLowerCase().indexOf(query.toLowerCase()) == 0) {
filtered.push(country);
}
}
this
.filteredCountries = filtered;
}
filterGroupedCity(event) {
let query = event.query;
let filteredGroups = [];
for
(let optgroup of
this
.groupedCities) {
let filteredSubOptions =
this
.filterService.filter(
optgroup.items,
[
'label'
],
query,
'contains'
);
if
(filteredSubOptions && filteredSubOptions.length) {
filteredGroups.push({
label: optgroup.label,
value: optgroup.value,
items: filteredSubOptions,
});
}
}
this
.filteredGroups = filteredGroups;
}
}