CODEWITHSUNDEEP
javascriptangularinnerhtml
Gabriel Sule
Gabriel Sule

Reputation: 383

angular 5 problems with innerHtml + curly braces

I am trying to use an HTML template with curly braces in a controller.

The problem I find is that when I use the innerHTML with safePipe, I see the curly braces and not the result.

home.html (template)

<ul>
  <li *ngFor="let item of events">
    {{item.name}}
  </li>
</ul>

sanitizing.ts

@Pipe({name: 'safe'})
export class SafePipe implements PipeTransform {

constructor(protected sanitizer: DomSanitizer) {}

public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
  switch (type) {
    case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
    case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
    case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
    case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
    case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
    default: throw new Error(`Invalid safe type specified: ${type}`);
   }
 }
}

home.component.html

<div [innerHtml]="myTemplate | safe: 'html'"></div>

result

{{item.name}}

desired result

dummy

Upvotes: 2

Views: 849

Answers (1)

Serginho
Serginho

Reputation: 7490

innerHTML doesn't compile angular templates.

If you want to insert a component dinamically, see angular docs dynamic component loader

 loadComponent() {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(Type.component);


    let componentRef = viewContainerRef.createComponent(componentFactory);
  }

Upvotes: 1

Related Questions