Render Angular 4 component with text coming in from an API

Question

I want to render incoming text from an API as subsequent HTML and component template. Most of the solutions I found here use @ViewChild to inject the components but that doesn't work for me since I need to iterate the same behavior for all items in the *ngFor loop.

This is how the code would look like:

The template of the component rendering the incoming messages:

      <div *ngFor="let item of messages">
            <compile-component [template]="item.html"></compile-component>
      </div>

Incoming message structure (item.html):

<my-component></my-component><div>Some html</div>

Component to compile:

@Component({
  selector: 'my-component',
  template: '<div>It works</div>',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent{ }

Output would look like this:

<div>It works</div><div>Some html</div>

I am looking for the solution for compile-component here. Any help is much appreciated. Thanks in advance.

Have you seen this? stackoverflow.com/questions/34784778/… — Martin Adámek
– Martin Adámek, Commented Oct 24, 2017 at 15:05

Martin Adámek · Accepted Answer · 2017-10-24 15:08:48Z

0

You should be able to do that via ComponentFactoryResolver. See angular docs about this here:

https://angular.io/guide/dynamic-component-loader

answered Oct 24, 2017 at 15:08

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

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

Collectives™ on Stack Overflow

Render Angular 4 component with text coming in from an API

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