Join Justin Schwartzenberger for an in-depth discussion in this video Using directive values, part of Angular 2 Essential Training.
- [Narrator] 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 mwFavorite 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 isFavorite property. The media item component HTML file is where we have the favorite element with the mwFavorite attribute on it.
We want to set this to a statement that will be evaluated. So we need to wrap the mwFavorite with brackets to let angular know we want to do binding here. Then we can set that directive property equal to media item dot isFavorite. Now we need to capture the value of the mwFavorite 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.
The component is a directive concept is key and makes working with both much easier when you reflect upon that relationship. So let's switch over to the favorite dot directive dot TS file. And in here, we need to add the input type to the import statement from the angular core scoped package. This time around, let's check out 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 an ES2015 spec 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. The syntax for a 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 mwFavorite name.
So we name the method mwFavorite. A setter method will get past a value so we can add a parameter named value and a pair of curly braces to complete the setter function signature. Based on this code, angular will match a property binding with the name mwFavorite, evaluate the statement that its 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 media item dot isFavorite property, 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 dash favorite CSS class with the host binding decorator. So all we need to do here is set this dot isFavorite equal to the value received in the setter method. And if we switch over to the browser, we can inspect the media items and see that some get the class is dash favorite and some don't based on their media item dot isFavorite data property.
Justin Schwartzenberger steps through the framework one feature at a time, focusing on the component-based architecture of Angular. Learn what Angular is and what it can do, as Justin builds a full-featured web app from start to finish. After mastering the essentials, you can tackle the other project-based courses in our library and create your own Angular app.
- What is Angular?
- Setting up an Angular template
- Creating a component
- Binding events and properties
- Getting data to components
- Using directives and pipes
- Creating Angular forms
- Validating form data
- Understanding dependency injection
- Providing services
- Making HTTP calls
Skill Level Intermediate
Q: This course was updated on 03/01/2018. What changed?
A: The following topics were updated: directives and pipes, forms, dependency injection and services, HTTP, and routing.