Inner HTML of ng-container, Angular 4?

Question

I want to dynamically place an html code in my html code, So I write the following code:

<ng-container [innerHTML]="buttonIcon"></ng-container>

Angular says innerHTML is not valid attribute for ng-container
I don't want to use third html tag like follows:

<div [innerHTML]="buttonIcon"></div>

So how can I insert html codes without any tag inner html binding?

Answer 1

[outerHTML]

will do the trick to replace the outer element.

In your case

<div [outerHTML]="buttonIcon"></div>

It's true, that it's important to have a clean HTML structure for e.g. keeping CSS rules as simple as possible.

Answer 2

You can use ngTemplate:

<ng-template #buttonIcon>
    <div> Your html</div>
</ng-template>
<ng-container 
   *ngTemplateOutlet="buttonIcon">
</ng-container>

Answer 3

** Please read the comments. This answer might be wrong. I dont know, have not looked into it again **

ng-container does not get rendered to html, it is a mere structural directive.

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

So there is no element to put html into. You need to work with a sub-div. If there is no need for a sub-div in your opinion, then you could most probably also just replace ng-container with div itself and not use the container at all.

Answer 4

If for any reason you need to replace the DOM element you can use a div with an id and then use the @ViewChild decorator and ElementRef to get access to the nativeElement from the controller and set the outerHtml property.

app.component.tml

<div #iconButton></div>

app.component.ts

import { Component, ViewChild, ElementRef, ViewEncapsulation, AfterViewInit }from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  implements AfterViewInit{
   @ViewChild('iconButton')
    iconButton: ElementRef;

    ngAfterViewInit(){
      this.iconButton.nativeElement.outerHTML = '<button>My button</button>'
    }
}

We need to use none as encapsulation policy because our template only includes the div to be replaced.

Stackblitz example: https://stackblitz.com/edit/angular-fa1zwp