-
Notifications
You must be signed in to change notification settings - Fork 6.7k
/
chips-demo.ts
105 lines (85 loc) · 2.14 KB
/
chips-demo.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
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {COMMA, ENTER} from '@angular/cdk/keycodes';
import {Component} from '@angular/core';
import {MatChipInputEvent} from '@angular/material/chips';
import {ThemePalette} from '@angular/material/core';
export interface Person {
name: string;
}
export interface DemoColor {
name: string;
color: ThemePalette;
}
@Component({
moduleId: module.id,
selector: 'chips-demo',
templateUrl: 'chips-demo.html',
styleUrls: ['chips-demo.css']
})
export class ChipsDemo {
tabIndex = 0;
visible = true;
color: ThemePalette;
selectable = true;
removable = true;
addOnBlur = true;
message = '';
// Enter, comma, semi-colon
separatorKeysCodes = [ENTER, COMMA, 186];
selectedPeople = null;
people: Person[] = [
{name: 'Kara'},
{name: 'Jeremy'},
{name: 'Topher'},
{name: 'Elad'},
{name: 'Kristiyan'},
{name: 'Paul'}
];
availableColors: DemoColor[] = [
{name: 'none', color: undefined},
{name: 'Primary', color: 'primary'},
{name: 'Accent', color: 'accent'},
{name: 'Warn', color: 'warn'}
];
displayMessage(message: string): void {
this.message = message;
}
add(event: MatChipInputEvent): void {
const {input, value} = event;
// Add our person
if ((value || '').trim()) {
this.people.push({ name: value.trim() });
}
// Reset the input value
if (input) {
input.value = '';
}
}
remove(person: Person): void {
const index = this.people.indexOf(person);
if (index >= 0) {
this.people.splice(index, 1);
}
}
removeColor(color: DemoColor) {
let index = this.availableColors.indexOf(color);
if (index >= 0) {
this.availableColors.splice(index, 1);
}
index = this.selectedColors.indexOf(color.name);
if (index >= 0) {
this.selectedColors.splice(index, 1);
}
}
toggleVisible(): void {
this.visible = false;
}
selectedColors: string[] = ['Primary', 'Warn'];
selectedColor = 'Accent';
}