Replacement of $compile in Angular

Question

I am trying to compile some HTML content in Angular 4, which can be done by $compile in Angular 1.

I tried some suggested alternatives of Angular 2, which are also deprecated.

Some one suggest me the best way to do.

Answer 1

The replacement of $compiler service in Angular is a Compiler. You can inject it like this:

class MyComponent {
     constructor(compiler: Compiler) {}

Read the article Here is what you need to know about dynamic components in Angular to understand how it can be used to dynamically compile components.

Here is an example from the article:

ngAfterViewInit() {
  const template = '<span>generated on the fly: {{name}}</span>';

  const tmpCmp = Component({template: template})(class {
  });
  const tmpModule = NgModule({declarations: [tmpCmp]})(class {
  });

  this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = this.vc.createComponent(tmpCmp);
      cmpRef.instance.name = 'dynamic';
    })
}