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:

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay