Angular v17.2 Updates — contentChild()

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