Я динамически добавил компонент нажатием кнопки.

Ниже приведен код моего виджета. Простой div с заданным в качестве входных данных свойством color.

Widget.tmpl.html

 div class="{{color}}" (click)="ChangeColor()"

В компоненте Widget я принимаю цвет в качестве входных данных. Этот компонент работает нормально, когда я добавляю его вручную. Но сейчас я пытаюсь динамически добавить компонент, а также необходимо передать значение цвета в компонент виджета.

Ниже приведен код в app.component.ts, где я вызываю addItem () при нажатии кнопки.

app.component.ts

export class AppComponent  {
  @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
  private componentFactory: ComponentFactory<any>;

  constructor(componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
    this.componentFactory = componentFactoryResolver.resolveComponentFactory(MyAppComponent);

  }

  addItem () {
   this.viewContainerRef.createComponent(this.componentFactory, 0);
  }

 public  myValue:string = 'red';

 onChange(val: any) { this.myValue = val; } }

В методе addItem () я динамически добавляю свой компонент виджета в мое представление. Компонент добавляется нормально. Но проблема в том, как передать свойство color при динамическом добавлении. Исходя из того, какой цвет я передаю при создании виджета, я хочу, чтобы он отображался красным или зеленым и т. Д. Как связать свойство в этом сценарии?

Вот некоторые из Кодекса:

export class MyAppComponent { 

    @Input() color; 
    @Output('changes') result: EventEmitter<any> = new EventEmitter(); 

    public constructor() { 
    }

    ChangeColor() {
        this.ToggleColor();
        this.result.emit(this.color);// Emitting the color to the parent.        
    }

    ToggleColor() {
        if (this.color == "red")
            this.color = "blue";
        else
            this.color = "red";
    }
}

В приведенном выше коде я излучаю свой цвет в родительский app.component.ts, но так как я динамически добавил компонент виджета, я не знаю, где добавить этот код (changes) = "onChange ($ event)". Я попытался добавить этот код в div, как показано ниже:

<div class="{{color}}" (click)="ChangeColor()" (changes)="onChange($event)"></div>

Но это не работает.