How To Reference Template Reference Variable

Author avatar

How to Use Template Reference Variables in Angular

Zachary Bennett

Languages Frameworks and Tools

Introduction

JavaScript frameworks like Angular provide great abstractions and useful APIs on top of the native Document Object Model (DOM) that can make your codebase more than readable, maintainable, and efficient. Simply what do yous practice when yous need to directly admission an HTML chemical element on the DOM in a manner that is type-safe?

Athwart'due south template reference variables provide a useful API through which y'all can collaborate with DOM elements and child components straight in your Angular code. In the sections that follow, you will larn what template reference variables are and how yous can utilise them in your Athwart components and services to gain low-level, manual command over the template elements that you are referencing.

Getting Started

To get started using template reference variables, just create a new Athwart component or visit an existing one. To create a template reference variable, locate the HTML element that you want to reference and and then tag it like so: #myVarName . In the code below, a template reference variable is created that references the <div> with id test-div .

                                      1                                                            <                    div                                                            id                    =                    "                    examination-div                    "                                                            #myTestDiv                    >                                                            ii                                                            </                    div                    >

html

Accessing Template Elements Using ViewChild

Having successfully created a reference to an HTML element within the template, you can now access this chemical element inside of the relevant Athwart component TypeScript file.

Within your Angular component, use the ViewChild decorator that Angular provides in lodge to demark to the previously created template reference variable. For HTML elements, use the ViewChild decorator to create a new ElementRef as shown below:

                                      ane                                                            @                    ViewChild                    (                    'myTestDiv'                    )                                          myTestDiv                    :                                                            ElementRef                    ;

typescript

This ElementRef gives your component direct access to the underlying HTML element when you employ its nativeElement field like this:

                                      1                                                            const                                          divEl                    :                                                            HTMLDivElement                                                            =                                                            this                    .                    myTestDiv                    .                    nativeElement                    ;

typescript

Warning: Template reference variables volition remain null/undefined until the view portion of the component has finished initiating. Make sure that you only endeavor to utilise these variables within the ngAfterViewInit lifecycle hook or after this claw completes!

For more information on the ElementRef blazon, check out the Angular documentation.

Using Template Reference Variables with Kid Components

Accessing underlying HTML elements in your Angular templates is neat, but what if you want to access kid components inside your template? This is also easy using template reference variables.

Using the same syntax above, you can create a template reference variable on a child component similar this:

                                      1                                                            <                    app-examination-component                                                            #myTestComp                    >                    </                    app-test-component                    >

html

With your child component referenced, yous can gain access to it in your Angular component class like this:

                                      i                                                            @                    ViewChild                    (                    'myTestComp'                    )                                          myTestComp                    :                                                            TestComponent                    ;

typescript

With your child component successfully captured, you can access it like this:

                                      i                                                            ngAfterViewInit                    (                    )                    :                                                            void                                                            {                                                            2                                                            // We can admission the TestComponent now that this portion of the view tree has been initiated.                                                            3                                                            this                    .                    myTestComp                    .                    saveTheWorld                    (                    )                    ;                                                            iv                                                            }

typescript

Conclusion

In this guide, you learned what template reference variables are in the Athwart framework and how yous can use them to proceeds typed references to both HTML elements located on the DOM and kid components.

You should now be confident in your ability to use template reference variables while avoiding variable-naming conflicts. Mastery of template reference variables will allow you to create a blazon-safe solution to that 5-ten% of cases where the Angular framework's direct DOM element bindings are not enough and a more manual solution is needed.