ViewChild.nativeElement null when using <ng-content>

Question

I have an issue whereby my ViewChild.nativeElement is null in all lifecycle hooks. My component looks like this:

@Component({
    selector: 'connector-component',
    template: `
    <ng-container>
      <ng-content></ng-content>
    </ng-container>
  `
})
export class ConnectorComponent implements AfterContentInit {
    @ContentChild('ccdComponent') ccdComponent: ElementRef;

    ngAfterContentInit() {
        console.log(this.ccdComponent); // works as expected
        console.log(this.ccdComponent.nativeElement); // null :(
    }
}

This component will be invoked like this:

<connector-component>
    <ccd-search #ccdComponent>
    </ccd-search-component>
</connector-component>

What I would like to determine is the tagname of the #ccdComponent - in this case, ccd-search. We can guarantee that the connector-component will include a child component with the tag #ccdComponent. And, in any case, the ElementRef is populated in the lifecycle hook, but the nativeElement is null.

How do I do this?

Reactgular · Accepted Answer · 2019-05-23 14:43:08Z

1

@ContentChild has a default behavior of reading the component instance. Therefore, the instance of <ccd-search> has no property named nativeElement so that value will always be undefined.

You must tell the query what you want to read.

@ContentChild('ccdComponent', {read: ElementRef}) ccdComponent: ElementRef;

The value of ccdComponent will be set before ngAfterContentInit is called.

https://angular.io/api/core/ContentChild

I don't think I've ever seen Angular create an ElementRef object that wraps an undefined element. Next time you see that thing.nativeElement is undefined. Take another look at thing and make sure it's an ElementRef. Angular will either create an ElementRef or it won't.

edited May 23, 2019 at 14:43

answered May 23, 2019 at 14:37

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

serlingpa Over a year ago

I did come across that in my search for an answer, but I also need to interact with the component's class, which the component is already doing. At the moment I have two content children - one with the { read } and one without. Is there a way around this?

Reactgular Over a year ago

@serlingpa add constructor(public el: ElementRef) to the component so you can access the native element directly from it.

serlingpa Over a year ago

That won't work. It's the contained component's tag name I'm after, rather than the containing component's.

Martin Parenteau Over a year ago

@serlingpa - Is there a problem with having two @ContentChild properties? That is what I would have suggested if you were not already doing it.

serlingpa Over a year ago

That's what I've done. Let's see if it passes pull request!

Collectives™ on Stack Overflow

ViewChild.nativeElement null when using <ng-content>

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related