Retrieving a content projected inside a component into a variable

Question

I am trying to retrieve content projected by an angular component into a typescript variable.

I tried retrieving the content using @ViewChild decorator and display it using console log() but I get an error.

The following is the code I wrote in various files :

app.component.html (Parent Component)

<app-test>
    <div class="t1">
        Test Data 1
    </div>
    <div class="t2">
        Test Data 2
    </div>
</app-test>

test.component.html (Child Component)

 <div #tt>The following data was passed to this component:</div>
    <ng-content select=".t1" #t1></ng-content>
    <ng-content select=".t2" #t1></ng-content>

test.component.ts (Child Component script)

import { Component, OnInit, ViewChildren, AfterContentInit, ElementRef } 
from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: [ './test.component.scss' ]
})
export class TestComponent implements AfterContentInit {

  @ViewChildren('t1') t1: ElementRef;
  @ViewChildren('t2') t2: ElementRef;
  @ViewChildren('tt') tt: ElementRef;
  constructor () { }

  ngAfterContentInit() {
      console.log(this.t1.nativeElement.innerHTML);
      console.log(this.t2.nativeElement.innerHTML);
      console.log(this.tt.nativeElement.innerHTML);
  }

}

I get the following error running this code

AppComponent.html:1 ERROR TypeError: Cannot read property 'nativeElement' of undefined at TestComponent.push../src/app/test/test.component.ts.TestComponent.ngAfterContentInit (test.component.ts:16) at callProviderLifecycles (core.js:18847) at callElementProvidersLifecycles (core.js:18828) at callLifecycleHooksChildrenFirst (core.js:18818) at checkAndUpdateView (core.js:19749) at callViewAction (core.js:19986) at execComponentViewsAction (core.js:19928) at checkAndUpdateView (core.js:19751) at callWithDebugContext (core.js:20639) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:20317)

My question is how can I display following:

The following data was passed to this component:
 Test Data 1
 Test Data 2

in the console safely ?

I'm curious: why not declare the variable in a service, and then import that service where ever you need access to the variable? Services are great for sharing variables, so I'm thinking perhaps I've not understood your scenario. — Bytech
@Bytech I am attempting create a reusable component which is independent of the application where it is put into use. Doesn't using services to transfer data (in this case) increase the coupling ? — Shobe Williams
In Angular, you can keep services loosely instead of tightly coupled. It sounds like in your case a Service is the way to go. Have a look at stackoverflow.com/questions/50772612/… ... the second part of the post addresses Angular specifically. If this all fits as a solution to your problem, let me know and I'll put it into an official answer. If not, do let us know about the nuances that make Services a poor solution to your case. — Bytech
@Bytech I have edited my question. The code under-neath app.component.html was not properly displayed because Stack Overflow actually rendered it. — Shobe Williams
@Bytech My question is really this: Is it possible in angular to retrieve the contents enclosed within the selector-tags of a child component into a variable in the child component. — Shobe Williams

Ako Javakhishvili Ako Javakhishvili · Accepted Answer · 2019-01-03T11:22:40

Use @ContentChild() instead of @ViewChildren(), here is the link where difference between these two decorators is explained pretty well: What's the difference between @ViewChild and @ContentChild?

Retrieving a content projected inside a component into a variable

1 Answers