Dropdown directive in Angular 12

Live URL

https://piyalidas10.github.io/dropdown-directive/

Dropdown directive with keyboard functionalities

1. CLick on outside the dropdown and press TAB from keyboard
2. focus will shift on dropdown
3. press ENTER key from keyboard - dropdown open
4. Press down arrow and up arrow to change the selected option and you can see the selected text will be changed
5. also can select using mouse

Four ways of listening to DOM events in Angular

https://medium.com/claritydesignsystem/four-ways-of-listening-to-dom-events-in-angular-part-1-event-binding-3ec7e9f51a1d

1. Event Binding: One-way data binding, in which information is sent from a component’s template to the component’s class
2. @HostListener: Angular decorator that handles events on the host element
3. Renderer2: Using Renderer2 .listen() method for a target event and element
4. RxJS: Using RxJS .fromEvent() operator that turns events into observable sequences