Add Inputs to Angular Directives
The @Input decorator allows you to pass values into your @Directive so that you can change the value of the Directive each time that it is used. Using @Input makes your Directives much more flexible and reusable so they can adapt to many different situations.
[00:00] Inputs are often used on components. Let's set up a component we can use in our app. We'll give this a selector of basic, and its template's just going to be a div. Then export a class of basic component, now just make sure to add this basic component to my declarations. Then I'll just add a little message of "Hi!" in here. In my template, I'll use my basic component.
[00:33] When I hit save now, you'll see we got this tiny little "Hi!" I'll make this a little bit bigger. If I wanted to change this "Hi!" based on the input in the component, we would say import, make sure to import that, and I'll say message, then I can bind this to the message. In here, I can say message is a string. You see these single quotes inside of the double quotes, so that this is the string. It's a string of something.. I'll hit Save.
[01:10] Now we're rendering out something. This string is Something. It's being passed into the message in the input and rendered out here. We can actually use inputs on directives as well. If I were to try and say, instead of message, that this was first. I'd hit Save. This will error out, saying that it can't bind the first since it's not a known property.
[01:35] We have to make first be an input on first before it'll even work. If I'd just say input first, then hit Save, that error will go away. Now it's overriding the entire thing in here with I'm a directive, because first is here. Now, if I want to take this value, this something, and assign it to this inner text, I need to flip this inner text to a getter or I say, getInnerText and then return this.first.
[02:11] Just delete that extra code there. Now, I when I hit save, you'll see we're back to something -- I'll delete all of these just so it's not confusing -- where this directive first is reading in this value of something, assign it to this input, and then my host binding is saying hey, whatever I'm on, change the inner text to this input so it's on its basic component. I could duplicate these and say another third. Hit Save. You'll see that each of these values being passed in will override those inner text of each of these components.
:) Clarification request :) With respect to the FirstDirective in the video. Is the usage of "@Input first" with the " selector: '[first]' " a special case when you want to "enable"/use property binding with a directive? Meaning, anytime we want to use property binding our custom directive we have to, by default make the directive's selector use brackets "[selector-name]" notation because ng2 template property binding syntax needs bracket notation and we need to make our custom directive's "@Input" match its "selector-name" between the brackets? In summary, is it correct to say that; when we want to use property binding on our custom directive, we have to make our custom directive conform to the ng2 template property binding syntax requirements?
Thanks for these great videos btw :). They are very helpful.