Local Reference Variables in Templates

Previously, we learned how we can bind data to our templates using interpolation with the double curly braces syntax. Besides this, we often spot named identifiers prefixed by a hash symbol (#) in the elements belonging to our components or even regular HTML elements. These reference identifiers, namely template reference variables, are used to refer to the components flagged with them in our template views and then access them programmatically. Components can also use them to refer to other elements in the DOM and access their properties.

We have learned how components communicate by listening to emitted events using event binding or passing data through input binding. But what if we could inspect the component in depth, or at least its exposed properties and methods, and access them without going through the input and output bindings? Setting a local reference on the component itself opens the door to its public API.

Note: The public API of a component consists of all public and protected members of the TypeScript class.

We can declare a template reference variable for the product detail component in the product-list.component.html file as follows: