Element references allow you to attach a variable name to elements inside the template. Then you can reference those elements throughout the template, and even in code.
You use the hash symbol (#), followed by a name of your choice. This is the associated element name, which you then use elsewhere.
The following is an example of a simple usage of element references:
<input #title /><span>{{ Title length: title.value.length }}</span>
Moreover, element references can be set to certain directives, and ngModel is one of them. Combined, you get the ngModel, associated with the element as the element reference variable, which includes the validity state, among other things.
Now change the ProductFormComponent template to display ...
