FilesExpand file tree

patch-1

/

select.component.ts

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

62 lines (48 loc) · 1.2 KB

patch-1

/

select.component.ts

Copy path

Top

File metadata and controls

• Code
• Blame

62 lines (48 loc) · 1.2 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

import { Component, ElementRef, EventEmitter, HostListener, Input, Output, OnInit } from '@angular/core';

export interface Option {

title: string;

value?: any;

}

@Component({

selector: 'aio-select',

templateUrl: 'select.component.html'

})

export class SelectComponent implements OnInit {

@Input()

selected: Option;

@Input()

options: Option[];

@Output()

change = new EventEmitter<{option: Option, index: number}>();

@Input()

showSymbol = false;

@Input()

label: string;

showOptions = false;

constructor(private hostElement: ElementRef) {}

ngOnInit() {

this.label = this.label || '';

}

toggleOptions() {

this.showOptions = !this.showOptions;

}

hideOptions() {

this.showOptions = false;

}

select(option: Option, index: number) {

this.selected = option;

this.change.emit({option, index});

this.hideOptions();

}

@HostListener('document:click', ['$event.target'])

onClick(eventTarget: HTMLElement) {

// Hide the options if we clicked outside the component

if (!this.hostElement.nativeElement.contains(eventTarget)) {

this.hideOptions();

}

}

@HostListener('document:keydown.escape')

onKeyDown() {

this.hideOptions();

}

}