0

How do I get the contents of my current component?

Say I have FooComponent that's used in another component, like so:

<foo>bar</foo>

How do I extract bar in FooComponent?

Tried this, but got val = null:

ngAfterViewInit() {
    console.info('val =', this.elementRef.nativeElement.value);
}
A T
  • 13,008
  • 21
  • 97
  • 158
  • Hmm, maybe [Content Projection](https://angular-2-training-book.rangle.io/handout/components/projection.html)? – A T Jan 11 '18 at 03:58
  • Possible duplicate of [angular 2 access ng-content within component](https://stackoverflow.com/questions/36545478/angular-2-access-ng-content-within-component) – Vala Khosravi Jan 11 '18 at 04:25

2 Answers2

1

Ahh, found it:

this.elementRef.nativeElement.innerHTML

And to the template add:

<ng-content></ng-content>
A T
  • 13,008
  • 21
  • 97
  • 158
  • yeah, you need to add a ng-content tag in template view to achieve this.. here is a proper example.. https://scotch.io/tutorials/angular-2-transclusion-using-ng-content – Hrishikesh Kale Jan 11 '18 at 04:23
0

I've created one stackblitz for you in which I've created a tabs component and that tabs component has 3 tabs and I'm passing 3 different templates from app component to tabs component. I think this will give you a better understanding of passing data to a component and how to create a custom component.

https://stackblitz.com/edit/angular-ck6nch?file=app%2Fapp.component.ts

arctic_Oak
  • 974
  • 2
  • 13
  • 29