This repository has been archived by the owner on Jun 16, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 42
/
select.component.ts
executable file
·123 lines (107 loc) · 3.27 KB
/
select.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import {
Component,
ChangeDetectionStrategy
} from '@angular/core';
import {
Router,
ActivatedRoute
} from '@angular/router';
import {
FormGroup,
FormControl
} from '@angular/forms';
@Component({
selector: 'select-demo',
templateUrl: 'select.component.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class SelectDemo {
form: FormGroup;
personId: FormControl = new FormControl(1);
people: any[] = [
{id: 1, name: 'Bryan Cranston'},
{id: 2, name: 'Aaron Paul'},
{id: 3, name: 'Bob Odenkirk'},
{id: 4, name: 'Dean Norris'},
{id: 5, name: 'Jonathan Banks'},
{id: 6, name: 'Seal Henry Olusegun Olumide Adeola Samuel'},
{id: 7, name: 'Rami Malek', disabled: true},
{id: 8, name: 'Christian Slater'},
{id: 9, name: 'Martin Wallström'},
{id: 10, name: 'Angela Sarafyan'},
{id: 11, name: 'Robert Pattinson'},
{id: 12, name: 'Billy Bob Thornton', disabled: true}
];
countryCode: string = 'FR';
countryLabel: string = 'Country';
autocompleteCountryCode: string = null;
otherCountryCode: string = null;
otherCountryCode2: string = null;
countryCodes: string[] = ['FR', 'DE', 'IT'];
countries: any = [
{name: 'France', code: 'FR'},
{name: 'Germany', code: 'DE'},
{name: 'Italy', code: 'IT'},
{name: 'Netherlands', code: 'NL'},
{name: 'Poland', code: 'PL'},
{name: 'Spain', code: 'ES'},
{name: 'United Kingdom', code: 'UK'},
];
color: string = "all";
colors: any = [
{ name: "Red", code: "r"},
{ name: "Green", code: "g"},
{ name: "Blue", code: "b"}
];
foodCategories: any[] = [
{id: '1', name: 'Vegetables'},
{id: '2', name: 'Fruits'},
];
foodByCategory: any = {
'1': [
'Avocado', 'Beet', 'Broccoli', 'Carrot', 'Cucumber',
'Onion', 'Potato', 'Pumpkin', 'Radish', 'Spinach'
],
'2': [
'Apple', 'Banana', 'Cherry', 'Grapes', 'Orange',
'Peach', 'Pear', 'Pineapple', 'Plum', 'Strawberry'
]
};
food: string[];
arrayForm: FormGroup;
locationControl = new FormControl('');
cityCoordinates: any = [
{name: 'İstanbul', latitude:'41.0055005',longitude:'28.7319952'},
{name: 'Paris', latitude:'48.8589507',longitude:'2.2770202'},
{name: 'London', latitude:'51.5287718',longitude:'-0.2416813'},
{name: 'New York', latitude:'40.6976701',longitude:'-74.2598654'},
{name: 'San Francisco', latitude:'37.757815',longitude:'-122.50764'},
{name: 'Sydney', latitude:'-33.8474027',longitude:'150.6517794'},
{name: 'Shanghai', latitude:'31.2246325',longitude:'121.1965643'}
];
locations: any[];
ngOnInit() {
this.form = new FormGroup({
personId: this.personId
});
this.arrayForm = new FormGroup({
locations: this.locationControl
});
this.locationControl.valueChanges
.subscribe((value: any) => {
console.log('locationControl.valueChanges', value);
});
this.locationControl.setValue([
{latitude:'41.0055005',longitude:'28.7319952'},
{latitude:'37.757815',longitude:'-122.50764'}
]);
console.log('this.arrayForm.value',this.arrayForm.value);
this.personId.valueChanges
.subscribe((value: any) => {
console.log('personId.valueChanges', value);
});
}
onChange(value: any) {
console.log('onChange', value);
}
}