In this video, learn how to use the @HostListener decorator to capture events on directives.
to host element events, via host listeners. … Angular provides another decorator … just like host binding. … let's add another host binding … And let's use that to decorate a favorite directive … class property named hovering, … So we write the @hostListener, … with a pair of parentheses, … and set the event name … to the string mouseenter. … We don't need the event emitted argument. … So we can leave that off here. … And remember, angular works with native events … without the on prefix. … And that is why this strings value is mouseenter, … instead of onmouseenter. … Okay, after the decorator, … we need to have a function signature. … This can be whatever name you want. … Let's name it onMouseenter. … It doesn't need a parameter, … And in the function, we set this .hovering to true. … passing it mouseleave. … Then over in our browser, … we can inspect the media item, … and then mouse over and off of the favorite icon, … and see the class getting applied and removed. … …
- What is Angular?
- Working with components
- Binding events and properties
- Getting data to components
- Using directives and pipes
- Creating Angular forms
- Validating form data
- How Angular does dependency injection
- Making HTTP calls
- Styling components
Skill Level Intermediate
Angular: Building an Interfacewith Ray Villalobos2h 20m Intermediate
1. Architecture Overview
3. Directives and Pipes
5. Dependency Injection and Services
8. Styling Components
Next steps1m 20s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.