Dynamic inject angular component into parent component

Question

I'm trying to inject angular component into parent component, with [innerHTML] attribute, I only get the HTML code, it does not compile to my child component

My child component:

@Component({
  selector: 'text-step',
  styleUrls: ['./text.scss'],
  templateUrl: 'text.html',
})

export class TextStepComponent implements OnInit {

  @Input() step: object;

  constructor(
  ) { }

  ngOnInit() {
  }

}

My parent component:

renderSteps(listSteps) {
  var context = this;
  var result = '';
  listSteps.forEach(function(step) {

    switch (step.type) {
      case 'form_text':
        context.innerHtml += '<text-step [step]=\"' + step + '\"></text-step>';
        break;
    }
  });
}

It means with each step will append a text-step component to a div

How can I do this?

this may help you. https://stackoverflow.com/questions/38888008/how-can-i-use-create-dynamic-template-to-compile-dynamic-component-with-angular — Johnny Tung, Jul 10 '17 at 10:37
User angular Renderer2 to minupulate the dom since it is platform independent. For more info [https://angular.io/api/core/Renderer2#appendChild](https://angular.io/api/core/Renderer2#appendChild) — Shanil Fernando, Jul 10 '17 at 10:41
All the information you need you can find in this article - [Here is what you need to know about dynamic components in Angular](https://hackernoon.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e). But you will not be able to update inputs — Max Koretskyi, Jul 10 '17 at 11:19

score 1 · Answer 1 · answered Nov 01 '18 at 18:13

1

You have to use. ComponentFactoryResolver

Please see the working demo

answered Nov 01 '18 at 18:13

Webber

184
2
13

Dynamic inject angular component into parent component

1 Answers1