All topics
Directivesintermediate

Directive Communication with exportAs

Explain how exportAs lets a template reference variable expose a directive's instance instead of the native element.

By default, a template reference variable placed on an element resolves to the native DOM element, but if a directive on that same element declares an exportAs name, using that name in the reference variable (#ref="exportAsName") instead resolves to the directive's instance, giving the template direct access to the directive's public properties and methods. This is exactly how Angular's own RouterLinkActive (exportAs: 'routerLinkActive') and NgForm (exportAs: 'ngForm') work, both extremely common patterns most Angular developers have used without necessarily naming the mechanism.

It's like a conference badge with multiple roles printed on the back — 'Speaker', 'Volunteer' — and calling out a specific role lets people address you in that specific capacity, instead of defaulting to just your name.

Key Concepts

1
Interviewers bring this up because it's a small but revealing detail: if you've written #form="ngForm" on a <form> tag to later check form.valid in the template, you've used exportAs directly, and being able to explain what's actually happening deepens your credibility on template-driven forms and directive internals both.
#form="ngForm"<form>form.validexportAs
2
The mechanism matters most when multiple directives (including a component, which is itself a directive with a template) are applied to the same element, because without exportAs, the template reference variable would default to the native element, making it impossible to reach any one specific directive's API from the template declaratively.
exportAs
3
A good interview answer also notes the limitation: exportAs only helps within the same template where the reference variable is declared — it doesn't help a component class reach a directive instance from TypeScript code, which is what @ViewChild(SomeDirective) is for instead.
exportAs@ViewChild(SomeDirective)