javascript - adding html tag inside typescript file in angular - Stack Overflow

admin管理员组

文章数量:1310160

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

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

• javascript
• angular
• typescript

Share Improve this question Follow edited Jan 7, 2020 at 12:55 R. Richards 25.2k1010 gold badges6666 silver badges6565 bronze badges asked Jan 7, 2020 at 12:54 A.AlshaikhliA.Alshaikhli 43744 gold badges99 silver badges1919 bronze badges 2

• You have to use DomSanitizer with the function bypassSecurityTrustHtml – Jacopo Sciampi Commented Jan 7, 2020 at 12:55
• Use innerHTML <div [innerHTML]="tooltip(param)'"></div> Can you share more code as Calling methods in bindings in not remended as it would be invoked in every change detection cycle Instead use a property and bind it in inner html. – Vikas Commented Jan 7, 2020 at 12:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.ponent.css' ]
})
export class AppComponent  {
  name = 'Angular';
  tooltip(param: any) {
        return `<span> ${param} </span>`;
      }
}

本文标签： javascriptadding html tag inside typescript file in angularStack Overflow