Home  >  Angular

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

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.
Angular Directive exportAs Example

Reference

Directive

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI








©2021 concretepage.com | Privacy Policy | Contact Us