DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

1

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:

Please leave your appreciation by commenting on this post!

Okay, let's go.

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay