I have 2 components A and B defined this way:
Component A:
import { Component, CORE_DIRECTIVES, ElementRef} from 'angular2/angular2';
import ComponentB from ".'ComponentB";
@Component( {
selector: 'component-a',
directives: [ CORE_DIRECTIVES ],
template: `
<component-b>
Inner text/html, whatever...
</component-b>
`
} )
export class ComponentA( {
static parameters = [ [ ElementRef ] ];
element:ElementRef;
constructor( element:ElementRef ) {
this.element = element;
}
afterViewInit():void {
}
} )
Component B:
import { Component, CORE_DIRECTIVES, ElementRef} from 'angular2/angular2';
@Component( {
selector: 'component-b',
directives: [ CORE_DIRECTIVES ],
template: `
<h1>{{innerContent}}</h1>
`
} )
export class ComponentB( {
static parameters = [ [ ElementRef ] ];
element:ElementRef;
innerContent:string;
constructor( element:ElementRef ) {
this.element = element;
}
afterViewInit():void {
}
} )
What i want to accomplish is to use the content between the <component-b> tag in Component A template to set the variable innerContent of ComponentB.
I have tried to use this.element.nativeElement.innerHTML inside afterViewInit of ComponentB class, but it gets the innerHTML of the template variable, not of the parent one.
Restrictions: Use of custom attributes in the component using @Inputs/@Outputs is not an option. e.g.
<component-b [innerContent]="Inner text/html, whatever...">
</component-b>