ContentChild looks for an element projected by the parent component into the ng-content element of the current component using content projection.
The new syntax gives us the same feature as a Signal:
@Component({
selector: 'app-entry',
standalone: true,
template: `
<ng-content></ng-content>
<section>
<small>Tag name: {{entryContent()?.nativeElement?.tagName}}</small>
</section>
<section>
<small>Tag content: {{entryContent()?.nativeElement?.textContent}}</small>
</section>
`,
})
export class EntryComponent {
entryContent = contentChild<ElementRef>('entry');
}
The full example is here: https://stackblitz.com/edit/stackblitz-starters-wcnhzl?file=src%2Fmain.ts
I hope you found it useful. Thanks for reading. 🙏
Let's get connected! You can find me on:
- Medium: https://medium.com/@nhannguyendevjs/
- Dev: https://dev.to/nhannguyendevjs/
- Hashnode: https://nhannguyen.hashnode.dev/
- Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
- X (formerly Twitter): https://twitter.com/nhannguyendevjs/
- Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs
Top comments (0)