Angular 2: Loading dynamic component in innerHTML

Question

I have 2 @components say and . Now, I have to load dynamically as innerHTML in say for e.g. as below

component-1.html

<div [innerHTML]="domEl | safeHtml"></div>

In the Angular2 component-1 class

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


@Component({  
  selector: 'component-1',

  templateUrl: './component-1.html',

  encapsulation: ViewEncapsulation.None
})
export class Component1 implements OnInit {    

  public ngOnInit() {
    this.domEl = '<component-2 data="1234"></component-2>'
  }
}

component-2 is already inject in app.module.ts file via declarations[]. Also safeHtml is the pipes used for safe HTML transformation.

Even then the problem is component-2 is not loading. Can anyone suggest how I can fix this?

Note:

if I include component-2 in component-1.html directly it will work. But we have a case where we cannot inject component-2 dynamically.
Stack is build on Angular2, TypeScript and Webpack.

Instead of loading innerHtml, use templates with ngIf or ngSwitch. — Fals
– Fals, Commented Mar 16, 2017 at 14:24
You can't inject component as html. Components are rendered from Shadow Dom to Real Dom. When you inject something using innerHTML, It's expected to be raw Html, not stuff thats need rendering pipeline. As I said before, you must use ngIf or ngSwitch — Fals
– Fals, Commented Mar 17, 2017 at 13:11

Community · Accepted Answer · 2017-05-23 11:54:53Z

1

Angular doesn't process HTML passed to [innerHTML]="..." except sanitization for security purposes. Bindings, components, directives, ... are not created, because as mentioned, Angular ignores the content. What you can do is to create a component at runtime like explained in Equivalent of $compile in Angular 2. AFAIR someone built a module that makes this easier but I don't remember details.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered May 9, 2017 at 16:56

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

Collectives™ on Stack Overflow

Angular 2: Loading dynamic component in innerHTML

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related