Pour pouvoir injecter du code html dans une balise, il faut utiliser l'une des méthodes suivantes :

Dans app.component.html

<div [innerHTML]="html">a</div>

Dans app.component.ts

import { Component , ElementRef,SecurityContext} from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
   html : string;

private htmlTemplate = `
   <div>Loading template</div>
   <script type="text/javascript">
console.log('loaded');
</script>
`;
constructor(private elementRef: ElementRef,private sanitizer :DomSanitizer) { }

ngAfterViewInit() {

//methode 1
  //this.html = this.sanitizer.sanitize(SecurityContext.HTML, this.htmlTemplate);

//methode 2
  let elem: Element = this.elementRef.nativeElement;

  elem.innerHTML = this.htmlTemplate;
}

}

 

En poursuivant votre navigation sur mon site, vous acceptez l’utilisation des Cookies et autres traceurs  pour réaliser des statistiques de visites et enregistrer sur votre machine vos activités pédagogiques. En savoir plus.