5

I was following Günter Zöchbauer's advice on how to create dynamic components and I was wondering how I could pass values to it - as in, the child component has an @input.

Using the plunker example given in the above question - plunker - how could I pass the child component a string, lets call it message, that would then display when clicking the 'add' button.

Here's an example of how the child component might look:

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

    @Component({
      selector: 'hello',
      providers: [],
      template: `<h1>{{message}}</h1>`,
      directives: []
    })
    export class HelloComponent implements OnChanges {
      @Input() message:any;

      constructor() {
      }

      ngOnChanges(changes:any){
      }
    }
Jack Rothrock
  • 407
  • 1
  • 8
  • 21

1 Answers1

16

You can try below,

  let instance  = this.viewContainerRef.createComponent(this.componentFactory, 0).instance;
  instance.message = "some text!!";

Here is the Plunker!!

Madhu Ranjan
  • 17,334
  • 7
  • 60
  • 69
  • 1
    I want to pass a dummy data first to show loading screen and then once I get the data from the API, I want to pass it. Is that possible – indra257 May 26 '17 at 17:41