I am struggling with a specific directive:
@Directive({
selector: '[myDirective]'
})
export class MyDirective implements AfterViewInit {
@ViewChild('wrapper') wrapper;
@ViewChild('list') list;
ngAfterViewInit() {
// At this point, both of these are undefined
console.log(wrapper, list);
}
}
This directive is designed to search for variables within the view in which it is applied.
For instance, if I have a template inside one of my components, MyComponent:
<div #wrapper myDirective>
<ul #list></ul>
</div>
The issue arises when the directive fails to locate these variables based on its current setup. It seems that because the directive itself does not possess a view, the ngAfterViewInit method executes too early and/or the @ViewChild decorator searches for wrapper and list in the wrong scope.
Do you know how I can modify the directive to properly find these variables?