I've been working on a custom Structural Directive inspired by the functionality of the RouterLinkActive directive.
To get started, I followed the example for the UnlessDirective and incorporated elements from Angular's RouterLinkActive directive, specifically where it uses the ContentChildren decorator to access child components.
// TODO(issue/24571): remove '!'.
@ContentChildren(RouterLink, { descendants: true })
links !: QueryList<RouterLink>;
// TODO(issue/24571): remove '!'.
@ContentChildren(RouterLinkWithHref, { descendants: true })
linksWithHrefs !: QueryList<RouterLinkWithHref>;
This is what my template currently looks like:
<p *appUnless="false">
This paragraph is displayed because the condition is false.
<a routerLink="/another-page">my link</a>
</p>
In an attempt to retrieve the links, I added the following method:
ngAfterContentInit(): void {
console.log("links length", this.links.length);
console.log("linksWithHrefs length", this.linksWithHrefs.length);
}
However, the issue I'm facing is that the links and linksWithHrefs arrays remain empty. Can anyone point me in the right direction? Here is the link to the full code. My Angular version is 7.