Angular - 5.5-Assigning an alias to custom properties

In the last video, we learned something crucial. We learned how to bind our own properties with @Input parentheses in front, that’s super important.

Now you can even configure it a little more. Sometimes you don’t want to use the same property on the outside of the component as you do on the inside.

So, inside this component, you could say that "element" is exactly the property name I want to use because it makes the most sense, but outside, maybe you don’t want bind to "element", and therefore bind to "srvElement" to clarify that this is the server element something like that.

Of course, this would not work because now you would try to bind to a property, Angular does not know that it can be linked because there is no "server element" property in this component with "@Input" in front.

You can assign an alias, you can pass an argument to @Input with the property name as you want outside of that component. So, "srvElement" could be added here and now, from the outside, so from the component where you implement this component, you should now target "srvElement" if you want to bind to this property. " Element" will no longer work, it must be "srvElement", which is why now with these two places modified in the app-component and in the server-element-component, we see the same thing as before, but now by linking via the alias. And just to be really sure, to clarify this, you have to use "srvElement", "element" will no longer work.

So this is a small bonus, a small alternative, in case you want to bind to another property name outside the component, this is how you assign an alias.