import { Component } from '@angular/core'; @Component({ selector: 'app-form-select', templateUrl: './form-select.component.html', styleUrls: ['./form-select.component.scss'], }) export class FormSelectComponent { selectedCompany: any; selectedCompanies: any; companies: any[] = []; companiesNames = ['Uber', 'Microsoft', 'Flexigen']; selectedChoices: any; choices: any[] = []; ChoicesList1 = [ 'Choice 1', 'Choice 2', 'Choice 3', 'Choice 4', 'Choice 5', 'Choice 6', ]; selectedChoices2: any; choices2: any[] = []; ChoicesList2 = ['Choice 1', 'Choice 2', 'Choice 3']; selectedAccount = 'Adam'; accounts = [ { name: 'Adam', email: 'adam@email.com', age: 12, country: 'United States', child: { state: 'Active' }, }, { name: 'Homer', email: 'homer@email.com', age: 47, country: '', child: { state: 'Active' }, }, { name: 'Samantha', email: 'samantha@email.com', age: 30, country: 'United States', child: { state: 'Active' }, }, { name: 'Amalie', email: 'amalie@email.com', age: 12, country: 'Argentina', child: { state: 'Active' }, }, { name: 'Estefanía', email: 'estefania@email.com', age: 21, country: 'Argentina', child: { state: 'Active' }, }, { name: 'Adrian', email: 'adrian@email.com', age: 21, country: 'Ecuador', child: { state: 'Active' }, }, { name: 'Wladimir', email: 'wladimir@email.com', age: 30, country: 'Ecuador', child: { state: 'Inactive' }, }, { name: 'Natasha', email: 'natasha@email.com', age: 54, country: 'Ecuador', child: { state: 'Inactive' }, }, { name: 'Nicole', email: 'nicole@email.com', age: 43, country: 'Colombia', child: { state: 'Inactive' }, }, { name: 'Michael', email: 'michael@email.com', age: 15, country: 'Colombia', child: { state: 'Inactive' }, }, { name: 'Nicolás', email: 'nicole@email.com', age: 43, country: 'Colombia', child: { state: 'Inactive' }, }, ]; groupByFn = (item: any) => item.child.state; groupValueFn = (_: string, children: any[]) => ({ name: children[0].child.state, total: children.length, }); ngOnInit() { this.companiesNames.forEach((c, i) => { this.companies.push({ id: i, name: c }); }); this.ChoicesList1.forEach((c: any, i: any) => { this.choices.push({ id: i, name: c }); }); this.ChoicesList2.forEach((c: any, i: any) => { this.choices2.push({ id: i, name: c }); }); } addTagFn(name: any) { return { name: name, tag: true }; } multiSelectSelected = ['Manchester']; multiSelect = [ { name: 'London', child: { state: 'UK' }, }, { name: 'Liverpool', child: { state: 'UK' }, }, { name: 'Paris', child: { state: 'FR' }, }, { name: 'Lyon', child: { state: 'FR' }, }, { name: 'Marseille', child: { state: 'FR' }, }, { name: 'Hamburg', child: { state: 'DE' }, }, { name: 'Munich', child: { state: 'DE' }, }, { name: 'Berlin', child: { state: 'DE' }, }, { name: 'New York', child: { state: 'US' }, }, { name: 'Washington', child: { state: 'US' }, }, { name: 'Michigan', child: { state: 'US' }, }, { name: 'Madrid', child: { state: 'SP' }, }, { name: 'Barcelona', child: { state: 'SP' }, }, { name: 'Malaga', child: { state: 'SP' }, }, ]; }