Angular Directive exportAs Example

By Arvind Rai, April 14, 2021

The Angular directive exportAs defines a name that can be used in the template to assign this directive to a variable. Angular directive has options such as 'selector', 'exportAs', 'inputs', 'outputs', 'providers', 'queries', 'host', and 'jit'.
The exportAs option defines a name as following.

@Directive({ 
     selector: '[color-toggle]',
     exportAs: 'colorToggle'
})

The name defined by exportAs is used to assign the directive to a variable using template reference such as #clToggle="colorToggle". This variable can be used to access methods of directive class directly.

Technologies Used
Creating Directive with exportAs
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Node.js 12.5.0
3. NPM 6.9.0

Creating Directive with `exportAs`

Find a sample custom directive code with exportAs.
color-directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
   selector: '[color-toggle]',
   exportAs: 'colorToggle'
})
export class ColorDirective {
   constructor(private elRef: ElementRef) {
   }
   @HostListener('mouseover') onMouseOver() {
      this.toggleColor();
   }
   @HostListener('mouseleave') onMouseLeave() {
      this.toggleColor();
   }
   toggleColor() {
      let color = this.elRef.nativeElement.style.color;
      let colorToSet = (color == 'red') ? 'black' : 'red';
      this.elRef.nativeElement.style.color = colorToSet;
   }
}

This directive toggles the color on mouse over and mouse leave. We can use this directive as following.

<div color-toggle> Hello World! </div>

Now suppose, we want to toggle color using button, too. As we can see that exportAs has defined a name as colorToggle in our custom directive code. We will assign colorToggle to a template reference variable as following.

<div color-toggle #clToggle="colorToggle"> Welcome to you! </div>

Now using clToggle, we can access directive methods directly on any event.

<button (click)="clToggle.toggleColor()">Toggle</button>

Complete Example

We have already given color-directive.ts file above in the article. Here find other files.
app.component.html

<h3>Example-1</h3>
<div color-toggle> Hello World! </div>

<h3>Example-2</h3>
<div color-toggle #clToggle="colorToggle"> Welcome to you! </div>
<br/><button (click)="clToggle.toggleColor()">Toggle</button>

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ColorDirective } from './color-directive';

@NgModule({
  declarations: [
    AppComponent,
    ColorDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Download source code using download link given below on this page.
2. Use downloaded src in your Angular CLI application. To install Angular CLI, find the link.
3. Run ng serve using command prompt.
4. Access the URL http://localhost:4200
Find the print screen of the output.