Angular - 2.20-Exercise 2

You’ve learned a lot about data linking! It’s time to put it into practice. In this work, you will use the different forms of Databinding and see how you can use them in your application.

So, did you succeed? Here’s my solution. We should add an input field. So I’m going to add a horizontal line again just to have some separation, and then my input field. The label, of course, is optional. I want the user to enter his username. So let’s add an input that receives this form-control class. If we save this and take a look at our application this is what it looks like.

Now, if you don’t want to have it directly on the edges, you can of course add some bootstrap style to it. We could put a container with a row inside and then you call class XS 12. Feel free to put your content in there. This is not necessary for the solution of this problem, of course.

So with this, we have our input field here with the username. Now we will link this username to a property of our TypeScript file. So, here, I will add a new property to my application component and I will name this property "username". It will be a string and I will define it as an empty string, like this.

Now we’ve learned that we can use the two-way link to link to this. So on my input here, I’m going to add a bidirectional link by adding brackets, then parentheses. It’s this bidirectional binding syntax, and then ngModel. Now, with this added, I can link to my username like this.

Now, important, for ngModel to work, you must make sure that in your application module you have added FormsModule to the imports because the NG model directive is technically part of the FormsModule provided by Angular. So make sure you have this. You should have it there by default when you use a CLI project. And with that, we should update the username with each key entered.

Now to be able to see this, I will add a paragraph below the input. And here I want to release "username". Now that it’s out here we can save that. NG Serve should work, of course. And we should see that if I enter "supermax" here, we see it below the entrance. So the first two tasks are solved.

Now let’s add the button. So we’ll add a button below the paragraph where I’ll say "reset user". And this button will first receive some bootstrap classes, btn btn primary to make it nice to see. But more importantly, we should disable it if the username is empty.

Now, how can we do this? We have learned that we can use the bidirectional link to link our input to a variable. To do this, we will add brackets followed by parentheses to our input, according to the syntax of the bidirectional link, then we add ngModel. Now, with this added, we can link our username.

However, for ngModel to work, we need to make sure that FormsModule is added to our application module imports, as the ngModel directive is technically part of the FormsModule provided by Angular. Make sure you have it in your default CLI project.

With this, we can update the username with each key entered. To verify this, we will add a paragraph under the input and display "username" in that paragraph.

To add a button, we will add a button below the paragraph, with bootstrap, btn, and btn-primary classes for aesthetics. But more importantly, we will disable it if the username is empty. For this, we can link the "disabled" property to an expression that returns true or false. In our case, we check if the username is an empty string, and disable the button accordingly.

We should also add a click earphone to this button to reset the username once we click on it. For this, we look for the event with normal parentheses, find "click", and call the reset method, where we put the username to an empty string.

With all this in place, we should be able to go back to the application, enter "supermax" in the input, then click "Reset User" to reset the username and disable the button. This solves our data link problem

.