skip to content
Alvin Lucillo

Querying projected content

/ 1 min read

We know that we can query the components with viewChild. For example, an input element (viewChild<ElementRef>('tag')) or a component (viewChild<SomeComponent>('tag')). You can also do the same with projected content using contentChild.

Parent component passing an h1 tag to app-test:

  <app-test>
    <h1 class="custom"> Ca va? </h1>
  </app-test>

Child component, with ng-content where projected/injected content is rendered

<ng-content select=".custom" />
custom = contentChild<ElementRef>("custom");