A template variable is a reference to a DOM element, that we can directly declare from the template.
We use the sharp symbol "#" to declare a template variable.
In app.component.html:
👉Here we declare a variable '𝐧𝐚𝐦𝐞' that targets the '𝐢𝐧𝐩𝐮𝐭' DOM element, since it is declared in that tag.
That way the '𝐧𝐚𝐦𝐞' variable references the '𝐢𝐧𝐩𝐮𝐭' DOM element.
That's a template variable.
𝐁𝐮𝐭 𝐰𝐡𝐚𝐭 𝐢𝐬 𝐢𝐭𝐬 𝐫𝐨𝐥𝐞?
First, it allows to access the value of the element input elsewhere in your template by using this '𝐧𝐚𝐦𝐞' variable:
💡You can use this variable wherever you want in that component template html. But you can't use it in another template html file.
𝐒𝐨, 𝐀𝐧𝐠𝐮𝐥𝐚𝐫 𝐚𝐥𝐥𝐨𝐰𝐬 𝐭𝐨 𝐫𝐞𝐟𝐞𝐫𝐞𝐧𝐜𝐞 𝐚 𝐃𝐎𝐌 𝐞𝐥𝐞𝐦𝐞𝐧𝐭 𝐝𝐢𝐫𝐞𝐜𝐭𝐥𝐲 𝐟𝐫𝐨𝐦 𝐚 𝐭𝐞𝐦𝐩𝐥𝐚𝐭𝐞, 𝐭𝐡𝐚𝐧𝐤𝐬 𝐭𝐨 𝐭𝐞𝐦𝐩𝐥𝐚𝐭𝐞 𝐯𝐚𝐫𝐢𝐚𝐛𝐥𝐞.