I have a component called SomeComponent. This component contains some Elements like a paragraph which has a template reference variable attached to it. Here is an example of SomeComponent
@Component({
selector: "some-component",
template: ` <p #isValid>Hello from Component</p> `
})
export class SomeComponent {
}
I use SomeComponent in my AppComponent.
Now I want to have a Directive attached to SomeComponent that gets all Elements of SomeComponent that have the #isValid template reference variable.
My approach was using ViewChildren inside of the Directive for this. Here is an example of the directive.
@Directive({ selector: "[getIsValid]" })
export class GetIsValidDirective implements AfterViewInit{
@ViewChildren("isValid") isValidChildren: QueryList<unknown>;
ngAfterViewInit() {
console.log("isValidChildren defined?", this.isValidChildren);
this.isValidChildren?.changes.subscribe((next) =>
console.log("isValidChildren changes", next)
);
}
}
SomeComponent and GetIsValidDirective are used in the AppComponent like this:
@Component({
selector: "app-root",
template: ` <some-component getIsValid></some-component> `,
styleUrls: ["./app.component.css"]
})
export class AppComponent {}
I expected to get all Elements that hasl isValid attached to it inside the GetIsValidDirective. But this.isValidChildren is always undefined.
Am I missing something obvious here or is this just not possible because the directive has no access to the inner view of SomeComponent?