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?

User angular Renderer2 to minupulate the dom since it is platform independent. For more info https://angular.io/api/core/Renderer2#appendChild — Shanil Fernando
– Shanil Fernando, Commented Jul 10, 2017 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. But you will not be able to update inputs — Max Koretskyi
– Max Koretskyi, Commented Jul 10, 2017 at 11:19

Webber · Accepted Answer · 2018-11-01 18:13:43Z

1

You have to use. ComponentFactoryResolver

Please see the working demo

answered Nov 1, 2018 at 18:13

Webber

1941 gold badge2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Dynamic inject angular component into parent component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related