adding html tag inside typescript file in angular

Question

i am using angular2 so i want to implement html tag inside the return function in ts file

  tooltip: (param: any) => {
        return `<span> ${param.value} </span>`;
      }

i have tried to use template literal but that make my span visible.

is there any idea how can i use the span proper way

Answer 1

try this code stackblitz example

import {Component, NgModule, Pipe, PipeTransform} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' import { FormsModule } from '@angular/forms'; import { DomSanitizer } from '@angular/platform-browser' @Pipe({ name: 'safeHtml'}) export class SafeHtmlPipe implements PipeTransform { constructor(private sanitized: DomSanitizer) {} transform(value) { console.log(this.sanitized.bypassSecurityTrustHtml(value)) return this.sanitized.bypassSecurityTrustHtml(value); } } @Component({ selector: 'my-app', template: `<div [innerHtml]="tooltip('Hello World') | safeHtml"> </div>`, styleUrls: [ './app.component.css' ] }) export class AppComponent { name = 'Angular'; tooltip(param: any) { return `<span> ${param} </span>`; } }