CODEWITHSUNDEEP
angular
ManishChahal
ManishChahal

Reputation: 183

ContentChild not working Angular with ngContent

I have created a main component in which trying to render the contentprojector component, which is defining and ng-content area for projection of content. When I am trying to access it using the ContentChild decorator it is giving undefined.

Code of appComponent.ts :

import { Component, ViewChild, AfterViewInit, ContentChild, AfterContentInit } from '@angular/core';
import { FirstChildComponent } from './first-child/first-child.component';
import { SecondChildComponent } from './second-child/second-child.component';
import { FirstContentComponent } from './first-content/first-content.component';
import { SecondContentComponent } from './second-content/second-content.component';
import { ContentProjectorComponent } from './content-projector/content-projector.component';
import { InsideProjectorComponent } from './inside-projector/inside-projector.component';

@Component({
    selector: 'pm-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit, AfterContentInit { 
    @ViewChild(FirstChildComponent) fc : FirstChildComponent;
    @ViewChild(SecondChildComponent) sF : SecondChildComponent;
    @ViewChild(FirstContentComponent) fCC : FirstContentComponent;
    @ViewChild(SecondContentComponent) sFC : SecondContentComponent;
    @ContentChild(ContentProjectorComponent) cp: ContentProjectorComponent;
    @ContentChild(InsideProjectorComponent) iP : InsideProjectorComponent;

    ngAfterViewInit()
    {
        console.log(this.fc);
        console.log(this.sF);
        console.log(this.fCC);
        console.log(this.sFC);

        console.log(this.iP);
    }

    ngAfterContentInit()
    {
        console.log(this.cp);
    }
}

App.component.html :

<section>
    Inside of main app component
</section>
<pm-first-child></pm-first-child>
<pm-second-child>

</pm-second-child>

<pm-first-content></pm-first-content>
<pm-second-content></pm-second-content>

<pm-content-projector>
        <section>
            Inside app projector elememt yayyy
        </section>
</pm-content-projector>

ContentProjector.html:

<ng-content>

</ng-content>

Can you please help why its is not giving me the contents of the content projector component or reference to its contents.

Upvotes: 1

Views: 2164

Answers (1)

Amit Chigadani
Amit Chigadani

Reputation: 29785

ContentProjectorComponent is not a ContentChild, but its a ViewChild of AppComponent. Because it is placed as a direct child on the template (as opposed to placing in between the opening and closing tags of app-component)

You have probably confused with the definition of ContentChild. Projecting a content inside the opening and closing tag of some component will not make that component ContentChild.

Rather, if the projected content contains some other pm-projector-child component, then that would become the ContentChild of the pm-content-projector component (shown in example below).

See here to understand the difference between ViewChild and ContentChild

Ex :

app.component

<section>
    Inside of main app component
</section>
<pm-first-child></pm-first-child>
<pm-second-child>

</pm-second-child>

<pm-first-content></pm-first-content>
<pm-second-content></pm-second-content>

<pm-content-projector>  <!--- view child of app component -->
        <section>
            Inside app projector elememt yayyy
        </section>
        <pm-projector-child>  --> content child of ContentProjectorComponent
        </pm-projector-child>
</pm-content-projector>

Small demo

Upvotes: 4

Related Questions