On the last tutorial article, we tackled how routes are created and used. In this article, we will talk about template reference variable.
A template reference variable is a variable that refers to a specific DOM element or a directive within the template. It is usually prefixed by a hashtag(#) symbol or ref- prefix.
Here are some examples:
- An input field accepts a text and labels it as #firstName
- When the button is clicked, it calls the setName() method with the value of #firstName
- This is the same as the previous example but with using the ref- prefix
- Here we have a template reference variable called #stockForm
- You can validate the form by calling the stockForm.form.valid
Going back to the example we created previously, we have a template reference variable named #stockForm.
- An interpolation is added to check the validity of this stockForm.
Save this and go back to your browser to test.
- It’s saying false because there are no inputs in either of the fields.
- Now that the input fields are filled, stockForm validity is now true.
Next we’re going to add a stockName variable that shows the inputed value simultaneously.
Save your work and go back to your browser to see the results.
And that’s what template reference variable is all about. On the next lesson, we will give you an overview on Observables.