Attribute directives: Custom - lordoftheflies/angular-essential-training GitHub Wiki

Okay, that's build a custom attribute directive. This attribute directive will handle setting a class on the media item element. If it has been set to a favorite or not, we start by creating a new file named favorite.directive.ts And in there we bring in the directive decorator with an import statement from the angular core scoped package. Then we use the @directive decorator and pass it in object literal for the directive metadata The selector value is going to be a string with square brackets around MWfavorite. We use the square brackets in this string because we want the selector to find a match on an element attribute and selectors are similar to the construct for a CSS selector. The MW prefix on the name is our own creation here, short for media watcher, the same prefix we use for component selectors. It's recommended to use a domain prefix on directive selectors for directives that you create to keep them unique for the application. Angular does this in the platform 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 host binding and is found in the angular core scoped package. So we add host binding to the import statement. Host binding 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. So inside of the director of class definition, we add @HostBinding() and a pair of parentheses. Then inside of the parentheses we put @HostBinding('Class.is-favorite') in single quotes. The class in this string is referring to a native Dom property available on elements and host binding targets properties. So that is why we use class.in this string okay. We follow the decorator with a class property which we will name @HostBinding('Class.is-favorite') isfavorite= true and we will initialize that to true for now. So the host binding decorator is configuring. This is favorite property of the favorite directive class to control whether or not the CSS class is- favorite gets put on the host element, which is the element that has this directive on it. Now we can switch over to the media-item.component.html file and put the directive property on the element for the favorite icon. Since we are not setting this directive property to a statement at this time we can simply add it with the normal attributes, syntax MWfavorite with no brackets. The last thing we need to do is let the app module know that this new directive is available for use. Over in the app.module.ts file. We want to add this new directive to the declarations of metadata property. Remember this declarations property is for components directives, and pipes you want to make available to others within your module. So we added an import statement to bring in the FavoriteDirective type (typing) and then we can add it to the declarations already okay. Over in the browser, we can inspect a media item and see the is- favorite CSS class apply to the element we put the directive on.