3

I want to pass ng-template as ng-content nested inside child

app-component.html

<app-parent>
  <ng-template appTemplateRetrieval>
    <div>this should be passed to grand child</div>
  </ng-template>
</app-parent>

parent-component.html

<app-child>
  {{directivesTemplate}}
</app-child>

parent-component.ts

 @ContentChild(TemplateRetrievalDirective, {static: false}) tplRetDir: TemplateRetrievalDirective;

  get directivesTemplate(): TemplateRef<any> {
    return this.tplRetDir && this.tplRetDir.template;
  }

directive

export class TemplateRetrievalDirective {

  constructor(public template: TemplateRef<any>) { }

}

child-component.ts

@ContentChild(TemplateRef, {static: true}) contentTpl: TemplateRef<any>;

  ngAfterContentInit() {
    console.log(this.contentTpl) // logs to console: undefined
  }

stackblitz: https://stackblitz.com/edit/angular-cuipde

I expect TemplateRef to be passed two levels down: app-component > parent > child

Anna
  • 2,988
  • 3
  • 15
  • 29
acetylen00
  • 31
  • 3

1 Answers1

0

If you are going to pass data to more than 1 level up or down I suggest you to take a look to services and make the use of a subject or a behaviorSubject to pass the data between multiple components.

Patricio Vargas
  • 5,236
  • 11
  • 49
  • 100