Custom user template for a component in Angular 2

Question

I've got a component that has it's default template:

    import {Component} from 'angular2/core';

    @Component({
        selector: 'my-component',
        template: `
            <div class="container">
                <div class="content">
                    <div *ngIf="contentRef.childNodes.length == 0">DEFAULT: <b>{{contentData}}</b></div>
                    <div #contentRef><ng-content select=".content"></ng-content></div>
                </div>
            </div>
        `
    })
    export class MyComponent {
        contentData = "DATA";
    }

I would like a user to be able to specify his own templates for some parts of the component when using it. So it can be written as follows:

import {Component} from 'angular2/core';
    import {MyComponent} from './my.component';

    @Component({
        selector: 'my-app',
        directives: [MyComponent],
        template: `
            <my-component></my-component> 
            <br/>
            <my-component>
                <div class="content">
                    CUSTOM: <i>{{contentData}}</i>
                </div>
            </my-component>
        `
    })
    export class AppComponent { }

It produces the following markup:

<my-app>
        <my-component>
        <div class="container">
            <div class="content">
                <!--template bindings={}--><div>DEFAULT: <b>DATA</b></div>
                <div></div>
            </div>
        </div>
    </my-component> 
        <br>
        <my-component>
        <div class="container">
            <div class="content">
                <!--template bindings={}-->
                <div><div class="content">
                CUSTOM: <i></i>
            </div></div>
            </div>
        </div>
    </my-component>
    </my-app>

So the component's 'contentData' property is not rendered within the custom template. Is it possible to provide the custom template with a specific binding context somehow? Or is there a better way to implement the case with a custom user template?

Answer 1

How to realize website with hundreds of pages in Angular2 shows an approach.

This is no official solution and to me it currently looks like this is likely to break before the final release. Angular2 has a strong tendency to statically building and resolving the bindings.

Either you can work with DynamicComponentLoader or you don't build on Angulars binding features for dynamically added content.