Get reference to a directive used in a component
It appears that since @Abdulrahman's answer, directives can no longer be accessed from @ViewChild
or @ViewChildren
as these pass only items on the DOM element itself.
Instead, you must access directives using @ContentChild
/@ContentChildren
.
@Component({
selector: 'my-app',
template: `
<h1>My First Angular 2 App</h1>
<div my-custom-directive>First</div>
<div #cdire=customdirective my-custom-directive>Second</div>
<div my-custom-directive>Third</div>
`
})
export class AppComponent{
@ContentChild('cdire') secondMyCustomDirective; // Second
@ContentChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
@ContentChild(MyCustomDirective) firstMyCustomDirective; // First
}
There is also no longer a directives
property on @Component
attribute.
You can use exportAs
property of the @Directive
annotation. It exports the directive to be used in the parent view. From the parent view, you can bind it to a view variable and access it from the parent class using @ViewChild()
.
Example With a plunker:
@Directive({
selector:'[my-custom-directive]',
exportAs:'customdirective' //the name of the variable to access the directive
})
class MyCustomDirective{
logSomething(text){
console.log('from custom directive:', text);
}
}
@Component({
selector: 'my-app',
directives:[MyCustomDirective],
template: `
<h1>My First Angular 2 App</h1>
<div #cdire=customdirective my-custom-directive>Some content here</div>
`
})
export class AppComponent{
@ViewChild('cdire') element;
ngAfterViewInit(){
this.element.logSomething('text from AppComponent');
}
}
Update
As mentioned in the comments, there is another alternative to the above approach.
Instead of using exportAs
, one could directly use @ViewChild(MyCustomDirective)
or @ViewChildren(MyCustomDirective)
Here is some code to demonstrate the difference between the three approaches:
@Component({
selector: 'my-app',
directives:[MyCustomDirective],
template: `
<h1>My First Angular 2 App</h1>
<div my-custom-directive>First</div>
<div #cdire=customdirective my-custom-directive>Second</div>
<div my-custom-directive>Third</div>
`
})
export class AppComponent{
@ViewChild('cdire') secondMyCustomDirective; // Second
@ViewChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
@ViewChild(MyCustomDirective) firstMyCustomDirective; // First
}
Update
Another plunker with more clarification