Cacher is the code snippet organizer for pro developers

 <select-comp [selectOptions]="dialog.primaryThemeOptions" (option)="onSelectInSelectComponent($event)" name="primaryThemeOptions" [(ngModel)]="selectedOptionFromSelectComponent" ngDefaultControl></select-comp>

<input [(ngModel)]="selectInput" class="input" class="wrapper-search-input" aria-expanded="false" (focus)="searchOption()" aria-autocomplete="both" readonly aria-owns="results">


<div class="autoComplete-select" *ngIf="showAutocomplete">
    <ul *ngFor="let item of selectOptions" (keydown.enter)="onSelectOption(item.option)" tabindex="0" role="listbox" class="autoComplete__list">
        <li role="option" aria-selected="false" (click)="onSelectOption(item.option)" class="service_name">
            {{item.option}}</li>
    </ul>
</div>

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

@Component({
	selector: 'select-comp',
	templateUrl: './select.component.html',
	styleUrls: ['./select.component.css']
})
export class SelectComponent implements OnInit {
	@Input() i: IDialog;
	@Input() value: string;
	selectInput: string = ''
	@Input() selectOptions: IOption[];

	@Output('option') option: EventEmitter<string> = new EventEmitter<string>()
	showAutocomplete: boolean = false;

	@HostListener("document:keydown.escape", ["$event"]) onKeydownHandler(
		evt: KeyboardEvent
	) {
		this.showAutocomplete = false;
	}

	// @HostListener("click", ["$event"])
	// onLocalClick(event: Event) {
	// 	this.showAutocomplete = false;
	// }


	constructor() { }

	ngOnInit() {
		// console.log('==', this.selectOptions);

	}
	search() {
		this.showAutocomplete = true;
	}
	onSelectOption(option) {
		console.log('---', option);
		this.selectInput = option;
		this.option.emit(this.selectInput);
		this.showAutocomplete = false;

	}
	searchOption() {
		this.showAutocomplete = true;

	}
	// hideSelect() {
	// 	this.showAutocomplete = false;
	// }

}
interface IDialog {
	iconSrc: string;
	iconAlt: string;
	title: string;
	closeBtnSrc: string;
	closeBtnAlt: string;
	textInfo: IText[];
	labelForPrimaryThemeSelector: string;
	primaryThemeOptions: IOption[];
	labelForSecondaryThemeSelector: string;
	secondaryThemeOptions: IOption[];
	labelforSubThemeSelector: string;
	subThemeOptions: IOption[];
	messageInfo: IMessageInfo[];
	labelForChooseExamOptions: string;
	chooseExamDateOptions: IOption[];
	labelForQuizOptions: string;
	chooseQuizOptions: IOption[];
	footerTitle: string;
	radioBtnText: IRadio[];
	labelForPhone: string;
	labelForMail: string;
	phonePrefixOptions: IOption[];
	updateSettingsBtnText: string;
	labelForTextarea: string;
	labelForUploadBtn: string;
	uploadBtnText: string;
	uploadIconSrc: string;
	uploadIconAlt: string;
	uploadInfo: string;
	btnUploadReportText: string;
	btnRemoveReportText: string;
	btnClearText: string;
	btnCancelText: string;
	btnSendText: string;

}

interface IText {
	id?: string
	text: string
}
interface IOption {
	option: string;
}
interface IMessageInfo {
	messageInfoIconSrc: string;
	messageInfoIconAlt: string;
	messageText: string;
	linkText?: string;
	linkHref?: string;
}
interface IRadio {
	name: string;
	value: string;
}

.autoComplete-select {
    position: absolute;
    /* top: 30px; */
    right: 0;
    width: 100%;
    z-index: 1;
    background: #fff;
    /* padding: 5px 10px; */
    border: 1px solid #d7d7d7;
    overflow-y: auto;
}


/* .input {
    position: absolute;
    top: 0;
    width: 100%;
} */

input.wrapper-search-input {
    width: 100%;
    border: 1px solid #d7d7d7;
    padding: 4px 0;
    background: url('../../../../../../assets/icons/V.png');
    background-repeat: no-repeat;
    background-position: top 13px left 10px;
    cursor: pointer;
}

ul.autoComplete__list {
    list-style: none;
    padding: 5px;
    border-bottom: 1px solid #d7d7d7;
    margin: 0;
    cursor: pointer;
}

ul.autoComplete__list:hover {
    background: #2c7095;
    color: #fff;
    transition: all 0.2s;
}