How to use string retrieved from back-end as template in Angular2?

Question

In an Angular2 app, I'd like to use ajax to retrieve a html tag string from back-end and use it as template in Angular2.

// The str I get from server by ajax is:
var str = "<my-hero [hero]=\"hero\"></my-hero>"

When the app is already running in the browser. If I $('myHeroParent').append(str). This code won't work.

How can you make this work? Is it called dynamic loading component?

Answer 1

Instead of a template, pass the string to $compile to create a DOM element: https://docs.angularjs.org/api/ng/service/$compile

Answer 2

I think you can send this particular html as a template in a component like this

angular.module('MenuApp')
.component('itemset1', {
templateUrl: '<my-hero [hero]=\"hero\"></my-hero>',
});