Setting @Input properties on dynamic component

[MarkPerryBV]

How do I set @Input bindings on my generated component.

[j-moeller]

This is a working example, where you can pass data via Input, note the "context." in front of the passed variables.

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div *componentOutlet="template; context: self; selector:'component'"></div>
        <input type="text" [(ngModel)]="title">
    `
})
export class AppComponent {
    self = this;
    title: string = "My Dynamic Component";
    descr: string = "This is a description"

    template = `<dynamic-component
        [title]='context.title'
        [descr]='context.descr'></dynamic-component>`;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { DynamicModule } from './dynamic.module';

import { ComponentOutlet, provideComponentOutletModule } from 'angular2-component-outlet';

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [AppComponent, ComponentOutlet],
    providers: [
        provideComponentOutletModule({
            imports: [DynamicModule]
        })
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

dynamic.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'dynamic-component',
    template: `
        <div>
            <h1>{{title}}</h1>
            {{descr}}
        </div>
    `
})
export class DynamicComponent {
    @Input() title;
    @Input() descr;

    constructor() {  }
}

dynamic.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { DynamicComponent } from './dynamic.component';

@NgModule({
    imports: [BrowserModule, FormsModule, CommonModule],
    declarations: [DynamicComponent],
    providers: [],
    exports: [DynamicComponent]
})

export class DynamicModule { }

[MarkPerryBV]

After the dynamic component replaces the *componentOutlet will it still do ngOnChanges stuff when I change context.title?

Awesome work btw. Thanks for the quick response.

[j-moeller]

At least, it's supposed to do it

[lacolaco]

Can I close this?

[basexcc]

I can't run the example, I using the code in my app

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div *componentOutlet="template; context: self; selector:'component'"></div>
        <input type="text" [(ngModel)]="context.title">
    `
})
export class AppComponent {
    self = this;
    context = {
        title: "My Dynamic Component",
        descr : "This is a description"
    }

    template = `<dynamic-component
        [title]='context.title'
        [descr]='context.descr'></dynamic-component>`;
}

[j-moeller]

Unfortunately, there have been breaking changes in #24

Removing the "context."-references should do the trick :)