Understand Exportas In Angular Directive
Jul 31st, 2020 - written by Kimserey with .
A few weeks ago we looked into ViewChild and ContentChild. We saw how template variable could be used to get references on the element they were defined on. In today’s post we will see how exportAs facilitates the creation of template variables.
Template Variables
As a reminder of what a template variables is; template variables are defined in the HTML using #. The following
1
<div #myTemp></div>
will create a template variable pointing to the div element. They can also be used to get a reference on a component
1
<my-component #myTemp></my-component>
1
2
3
4
@Component({
templateUrl: 'my-component.html',
})
export class MyComponent { }
will create a template variable pointing to MyComponent.
A template variable can then be used to get a reference of the variable in the directive class using ViewChild, or it can be passed to other component as Input.
1
2
<my-component #myTemp></my-component>
<my-second-component [temp]="myTemp"></my-second-component>
1
2
3
4
5
6
@Component({
templateUrl: 'my-second-component.html',
})
export class MySecondComponent {
@Input() temp: MyComponent;
}
exportAs
This works for HTML ref elements and components as the tag itself is assigned to the template variable. But for directive, we need a way to assign the template variable a value.
This is done using exportAs property of the directive decorator.
1
2
3
4
5
<span myDirective #myTemp="myDirective">
Hello world
</span>
<my-second-component [temp]="myTemp"></my-second-component>
1
2
3
4
5
6
7
8
9
10
11
@Directive({
selector: '[myDirective]',
exportAs: 'myDirective'
})
@Component({
templateUrl: 'my-second-component.html',
})
export class MySecondComponent {
@Input() temp: MyDirective;
}
A selector in square bracket [] defines an attribute selector. We can also define attributes that target specific HTML elements div[myDirective] or input[myDirective].
The exportAs allows us to assign the directive to a template variable with #myTemp="myDirective" which then allows us to set it as input of other components in the template.
This notation is heavily used in Angular Material directive. For example the Autocomplete component:
1
2
3
4
5
6
7
8
9
10
11
<div class="custom-wrapper-example" matAutocompleteOrigin #origin="matAutocompleteOrigin">
<input
matInput
[formControl]="myControl"
[matAutocomplete]="auto"
[matAutocompleteConnectedTo]="origin">
</div>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option"></mat-option>
</mat-autocomplete>
Here #auto="matAutocomplete" matAutocomplete is assigned to auto which is then passed to the [matAutocomplete] on the input. This is so that when a value change on the input, the autocomplete can be triggered. Then the matAutocompleteOrigin is assigned to origin which is then set to the directive [matAutocompleteConnectedTo] on the input which indicates where the autocomplete panel should be attached.
And that concludes today’s post!
Conclusion
Today we looked at template variables. We started by looking at the common usages of template variables and how they could be defined. We then moved onn to look at exportAs, a property of a directive allowing us to assign the directive to a template variable. Lastly we finished by looking at the way exportAs was used in Angular Material for the Autocomplete component. I hope you liked this post and I see you on the next one!