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;
}
}