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

Angular-Dropdown-Directive-Using-Angular12
https://github.com/piyalidas10/dropdown-directive

angular angular-directive angular-testing dropdown jasmine

Last synced: 5 days ago
JSON representation

Angular-Dropdown-Directive-Using-Angular12

• Host: GitHub
• URL: https://github.com/piyalidas10/dropdown-directive
• Owner: piyalidas10
• Created: 2023-03-12T04:52:04.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-03-12T10:42:34.000Z (over 1 year ago)
• Last Synced: 2024-10-16T13:05:43.422Z (20 days ago)
• Topics: angular, angular-directive, angular-testing, dropdown, jasmine
• Language: TypeScript
• Homepage:
• Size: 137 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

```