I have a component whose template looks something like this:
<div [my-custom-directive]>Some content here</div>
I need access to the MyCustomDirective class instance used here. When I want to get access to a child component, I use a ViewChild query.
Is there an equivalent feature to get access to a child directive?
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
MyCustomDirective. If there are multiple directives, it'll match the first one. But, when using exportAs, you can specify any one in particular, for example, the second MyCustomDirective. –
Graviton @ViewChildren() –
Lash ViewChild() unless you want all or the first instance of the type. I added new plunker –
Graviton Second without using exportAs ? –
Graviton @ViewChild('cdire', {read:MyCustomDirective}) secondMyCustomDirective: MyCustomDirective, and <div #cdire my-custom-directive>Second</div> (no exportAs needed). –
Magically exportAs. Very good point! Thanks! –
Basidiospore @ViewChild(MyCustomDirective, { static: false }) will do the trick. At least in Angular 8 for sure. –
Abmho As mentioned in the comments of the other answers, these other (previously valid) methods would not work with the more recent versions of Angular.
Rejoice, however, for there is an even simpler way to get it injected: directly from the constructor!
@Component({
// ...
})
export class MyComponent implements OnInit {
// Would be *undefined*
// @ContentChild(MyDirective, { static: true })
// private directive: MyDirective;
constructor(private directive: MyDirective) { }
ngOnInit(): void {
assert.notEqual(this.directive, null); // it passes!
}
}
Additionally, you can add multiple annotations to tell the Dependency Injection engine where to look for the content to inject, using @Self or @Optional for example 🙂
Self() is the correct way to go and the value is available in the constructor. (womm) –
Tallage ngIf. When it is finally available (I managed to get the reference to the component itself using the approach ViewChild-setter-BehaviorSubject subscription), I want to get the reference to its directive(s)... –
Nerva 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.
this.firstMyCustomDirective is undefined –
Aversion © 2022 - 2024 — McMap. All rights reserved.
cdiredirectly like,@ViewChild(MyCustomDirective) element:MyCustomDirective;Then, inngAfterViewInit - this.element.logSomething('text from...'). So why your approach when directly by just passing the type you can do so? Just for the clarification. – Domicile