Using directive values - lordoftheflies/angular-essential-training GitHub Wiki

Okay, time to learn how you can make your custom directive support input values from the directive property that matches the directive selector on the host element. Let's start by updating the favorite directive to support using the directive property syntax with a statement so we can use the MW favorite directive selector on the media item element and set it equal to a statement that will give us the value of a media item's is favorite property. The media-item.component.html file is where we have the favorite element with the MW favorite attribute on it. We want to set this to a statement that will be evaluated. So, we need to wrap the MW favorite with brackets to let Angular know we want to do the binding here. Then, we can set the directive property equal to mediaitem.isfavorite. Now we want to capture the value of the MW favorite property in the favorite directive. Remember, from a previous lesson, how data can be delivered to components via property bindings when components make use of the input decorator? And remember that a component in Angular is just a directive with a template? Well, the input decorator can be used on a directive class property, just like on a component class property. So, let's switch over to the favorite.directive.ts file. And, in here, we need to add the input type into the import statement for the Angular core scoped package. This time around, let's checkout another way you can use the input decorator. In the media item component, it was used to decorate a class property. You can also use it to decorate a class setter method. Now, a setter method is a way of defining a method that will be called when a property with the same name is set to a value from an instance of the class. So, we can add the input decorator syntax and follow that up with a setter method. (typing) The syntax for the setter method is set space and then the name of the method. So the input decorator handles using the name of the item it decorates as its default name mapping. And, in this scenario, we want to use the MW favorite name. So, we name the method mwFavorite. A setter method will get past a value so we can add a parameter named value here. Based on this code, Angular will match a property binding with the name mwFavorite, evaluate the statement that it is set to and pass the result of that statement into this setter method. Since we set up the directive property binding back in the media-item-list template to use the mediaitem.isfavoriteproperty this setter will be receiving a Boolean value. And in the favorite directive, we already set up a class property named isfavorite that we used to add the is-favorite CSS class with the host binding decorator. So, all we need to do here is to set this.isfavorite equal to the value received in the setter method. (typing) And if we switch over to the browser, we can inspect the media items and see that some get the class is favorite and some don't, based on their mediaitem.isfavorite data property.