In this video, learn how to create a custom attribute directive and make use of the @HostBinding decorator.
- [Instructor] Okay, let's build … We start by creating a new file … from the Angular Core Scoped package. … and pass it an object literal for the directive metadata. … with square brackets around mwFavorite. … on an element attribute … on directive selectors … with the prefix ng. … After the directive decorator, … we need to export a class named FavoriteDirective. … To get a class applied to the host element … that the directive is on, … you can use another Angular decorator. … This one is called HostBinding … is found in the Angular Core Scoped package. … So, we add HostBinding to the import statement. … HostBinding is used to bind a host element property … to a directive property. … It takes in a string representing the property syntax. … In our case, we want to use it … to set a CSS class named is-favorite. … we add @HostBinding and a pair of parentheses. … Then inside of the parentheses, … we put class.is-favorite in single quotes. … available on elements … so that is why we use class dot in this string. …
- 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.