3

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>

1 Answer 1

1

In ComponentB template, put this:

template: `
    <h1><ng-content></ng-content></h1>
`
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.