Angular - 2.14 Propriété Binding

interpolation, which is a great tool to output data in a model. Now, I want to take a look at the property link. By the way, there are many cases where you can use either the property link or the string interpolation. I’ll show you what I want to say in a moment.

Let’s go to our server component where we manage all the servers and I want to allow the user to add new servers. So we’ll need a button on which I’ll say "add a server". And I’m just going to add a few CSS classes, "btn" and "btn-primary", so that this part is pretty, all using the normal CSS classes of Bootstrap, nothing to do with Angular.

To reflect this change in my server component here, I also want to comment on the online template and point back to the external template. So, "templateUrl" should point to my file "servers.component.html", like this. Now, if I save this file, we see this button here. Right now, it makes no sense for me to click this button because it doesn’t do anything. We have not yet learned to react with the click of a button. So I’m going to add a new property in my TypeScript code here that I’m going to name "allowNewServer" and set it to false.

Now, this is also another property that contains a boolean value, so true or false, in this case false because I don’t want to allow the user to create a new server and you can still imagine that this is somehow dynamically derived, we will soon be working with dynamic data.

So, in the HTML file here, I now want to disable the button. And as you probably know, there is a "disabled" attribute that you can add, like this. If we save now, the button is disabled, I can’t click on it. That’s fine, but it’s hard-coded in HTML. Now, maybe this "allowNewServer" code here changes though, maybe it’s not set like that all the time. So we wouldn’t be able to respond to that.

And I can actually demonstrate that. For now, in the constructor which is simply a method executed at the time this component is created by Angular, calling "setTimeout", a normal Javascript function and here I define after what period of time or after how many milliseconds something has to happen, so after 2000 milliseconds which are two seconds, I want to perform a function and here I use an ES6 arrow function.

This syntax may seem strange, it’s almost the same as a function like this, with some differences when it comes to managing the keyword this. But in the end, here you have passed the arguments and here you have the body

So, in summary, in this last course, we’ve seen string interpolation, which is a great tool to output data into a model. Now we’re going to look at the ownership link.

There are many cases where you can use either the property link or string interpolation. I’ll show you what I want to say in a moment. Let’s go to our server component where we manage all the servers and I want to allow the user to add new servers.

We’ll need a button on which I’ll say "add a server", and I’ll just add a few CSS classes, "btn" and "btn-primary", to make this part pretty. All this using the normal CSS classes of Bootstrap, nothing to do with Angular. To reflect this change in my server component, I also want to comment on the online model and point back to the external model. So templateUrl should point to my servers.component.html file, like this.

Now, if I save this file, we see this button here. For the moment, it makes no sense for me to click on this button because it does nothing, we have not yet learned to react to a click of a button. So I’m going to add a new property in my TypeScript code here that I’m going to name "allowNewServer" and set it to false.

Now, it is also another property that contains a boolean value, so true or false, in this case false because I do not want to allow the user to create a new server. You can still imagine that this is somehow dynamically derived, we will soon be working with dynamic data.

So in the HTML file here, I now want to disable the button. As you probably know, there is a "disabled" attribute that you can add, like this. If we save now, the button is disabled, I can’t click on it. That’s fine, but it’s hard-coded in HTML. Now maybe this "allowNewServer" code here changes though, maybe it’s not set like that all the time. We wouldn’t be able to respond to that, and I can actually demonstrate that.

For now, in the constructor, which is simply a method executed when this component is created by Angular, by calling setTimeout, a normal Javascript function, and here I define after what period of time or after how many milliseconds something has to happen, so after 2000 milliseconds which are two seconds, I want to perform a function, and here I use an ES6 arrow function. This syntax may seem strange, it is almost the same as a function like this, with some differences when it comes to managing the keyword "this". But in the end, here you’ve passed the arguments and here you have the body of the function, more importantly, here I can

Now, if we look at our application in the browser, we will see that the button is now disabled when the page is initially loaded, because the value of the allowNewServer property is set to false.

However, if we wait two seconds, thanks to the setTimeout we set in the builder, the value of allowNewServer will be updated to true. We can see that the button becomes clickable.

So, by using the property link, we were able to dynamically link the disabled property of the button’s HTML element to the allowNewServer property of our component. This enabled us to disable or enable the button based on the value of

In short, the property link is a powerful Angular tool that dynamically links the properties of HTML elements to properties of our component. This allows us to make our application more interactive and flexible, enabling it to respond to changes in a dynamic way.