DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

Angular v17.2 Updates - contentChild()

Image description

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');
}
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)