import { Component , EventEmitter , Output , ViewChild , Input , ElementRef , } from "@angular/core" ; import { DropdownService } from "./dropdown.service" ; import { DropDownItemsAnimation } from "./dropdown.animations" ; import { FilesSet , AppFile } from "../../../data" ; @ Component ( { selector : "app-dropdown" , templateUrl : "./dropdown.component.html" , styleUrls : [ "./dropdown.component.scss" ] , animations : [ DropDownItemsAnimation ] , } ) export class DropdownComponent { @ Input ( ) object : FilesSet | AppFile ; @ Output ( ) status = new EventEmitter < boolean > ( ) ; @ Output ( ) selectedFiles = new EventEmitter < File [ ] > ( ) ; @ ViewChild ( "invisibleInput" , { static : false } ) fakeInput : ElementRef ; dropdownState = false ; outsideClickEnable = false ; choosenItem : string ; dropdownList : string [ ] ; constructor ( private dropdownService ) { } public open ( ) { this . dropdownList = [ ... this . dropdownService . list ] ; if ( ! this . dropdownState ) { this . dropdownState = true ; setTimeout ( ( ) => { this . outsideClickEnable = true ; } , 10 ) ; } else { this . close ( ) ; } this . status . emit ( this . dropdownState ) ; } public close ( ) { this . outsideClickEnable = false ; this . dropdownState = false ; this . status . emit ( this . dropdownState ) ; } public selected ( item ) { this . dropdownService . selected ( item , this . object ) ; this . close ( ) ; } public getFilesFromSystem ( ) { this . selectedFiles . emit ( this . fakeInput . nativeElement . files ) ; } public trackByFn ( index ) { return index ; } }