Angular2 [innerHtml] angular2 tag doesn't work

Question

I want to inject html in my a-component with angular2 tags from another component.

@Component({
  selector: 'app-root',
  template: '<app-a [my-html]="my-html"> </app-a>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  my-html= '<span> {{variableFromAComponent}}</span>';
}



@Component({
      selector: 'app-a',
      template: '<div [innerHtml]="my-html"> </div>',
    })
    export class AComponent {
      @Input('my-html') my-html:any;
      public variableFromAComponent='its work!'; 
    }

I want to see in result : its work! (from variableFromAComponent) But i see {{variableFromAComponent}} (angular2 tags doesn't work).

Samara

Answer 1

I found a solution in angular2-dynamic-component

<template dynamic-component
          [componentContext]="self"
          [componentModules]="dynamicExtraModules"
          [componentTemplate]='"here html tags with angular2 tags"'>
</template>

Samara

Answer 2

Angular doesn't process HTML added by [innerHTML]="..." at all. It is just added as is and that's it. You might even need to use the Sanitizer, so nothing gets stripped for security reasons (see In RC.1 some styles can't be added using binding syntax).

If you want to dynamically add components, you can use ViewContainerRef.createComponent() for example like explained in Angular 2 dynamic tabs with user-click chosen components

Claireclairobscure

Of course not. As I said, Angular2 doesn't create components for HTML added this way. – Nematode

i watched your example for loading dynamic tabs. I don't want to load components, i want load my html with Angular2 tags. My task - load html with angular2 tags from server and rendered it in another components. – Samara

There are answers that show how to create new components at runtime. That's the only way to create components from HTML loaded at runtime. Search for $compile (only on the phone right now) – Nematode

Thank you very much for your help. I took angular2-dynamic-component – Samara

Answer 3

There are a couple ways that you can do this.

COMPONENT INTERACTION

If there is a parent/child relationship between the components then you can use Input() and Output() to pass values between them

This child component gets the value through the Input()

child.component.ts

import { Component, Input } from '@angular/core';
@Component({
  selector: 'child',
  template: '<div>{{myHtml}}</div>', // these curly braces add the text as innerHTML
  providers: [ FoodsService]
})
export class ChildComponent implements OnInit {
   @Input() myHtml: string;
}

which is passed from the parent through the template:

parent.component.html

<child [myHtml]="'You're String Here (or a variable set to "its work")'"></child>

You can use Output() to go from child to parent.

SERVICES

The other way is to create a service that gets injected into both components. One component can send a value to the service and the other can get that value. In Angular2 this is often achieved by using observables to a data object.

Introduce

I did not just use innerHtml. I tried you solution, as a result - html tags and angular2 tags doesn't work – Samara

Answer 4

You can use Renderer2 Class for this.

import { ElementRef, Renderer2 } from '@angular/core';

constructor (
  private elementRef: ElementRef,
  private renderer: Renderer
) {}

public ngAfertViewInit(): void {
  this.renderer
     .setElementProperty(
        this.elementRef.nativeElement, 
        'innerHTML',
        '<h1> Nice Title </h1>'
     );
}

Sedillo

@Samara I was able to render d3 graphs with this on the server last week, it is experimental but if doesn't work for you use the Renderer class instead. – Sedillo