Angular - 2.15 Binding properties VS string interpolation

In the last course, we learned how to link properties. Now, if we had the use case we also wanted to display the current value of allowNewServer, we could of course use string interpolation to simply display "allowNewServer". In addition, a Boolean can also be cast into a chain. So now we get "false" here and after two seconds, you see it changes to "true" because we changed it in the code.

Now, this is one of the cases here where you can easily use the property link instead of string interpolation. So you can simply link the property of this element, the innerText property and make it equal to "allowNewServer". Now I can delete string interpolation here inside the text.

And while it may seem empty now while we’ve set the internal text, we get the same behavior as before because the element’s innerText property is just what’s between the open and close tag. So in this case, we could easily replace the string and interpolation with the property link.

When should either method be used? Well, basically, if you want to display something in your template implementing text, use string interpolation. If you want to change a property, whether it’s an HTML element or as you’ll learn later from a directive or component, you usually use the property link. This is how you can differentiate it and you will get an overview of it once you have worked on the course project and so on.

It is therefore important not to mix the property link and string interpolation. You may notice that here we have disabled equalities and then we have quotation marks and then directly the name of our property. There are no braces between these quotes and there should be none because it will break the application. This will not work between the property link quotes. You can and should already write TypeScript code, that is, a TypeScript expression that will return the value expected by this property.

Thus, we use "disabled" to disable an expression that returns true or false. So, just like for string interpolation, you can also call a method there, but you don’t have to add braces. Once it looks clean, we simply use an HTML attribute. This syntax here is a syntax recognized by Angular. You have to write TypeScript code because again, this whole expression is evaluated by Angular, the mixture of string interpolation will break it.

String interpolation works only in a normal model, not in another expression of that model, not in a property link or something like that. Now that we’ve seen the property link, let’s see how we can react to events.

In Angular, we can use the "ng-click" directive to react to clicks on an HTML element. You can use it this way: in the HTML element, you add the "ng-click" directive and you link it to a method of your component that will be called when the user clicks on that element.

For example, if you have a button to add an item to a list, you can add the "ng-click" directive to that button and link it to a "add Element()" method of your component. Thus, when the user clicks on this button, the "add Element()" method will be called and you can add a new item to your list.

There are also other guidelines for responding to other types of events, such as the "ng-submit" directive for responding to a form submission.

In conclusion, property linking and events are important concepts in Angular. The property link allows you to link the properties of an HTML element to the properties of your component, allowing you to create dynamic and reactive applications. Events allow you to react to user actions, such as clicks and form submissions. By understanding these concepts, you can create more powerful and interactive applications in Angular.