Tips for typing the HTML tag as text inside a span element with Angular

Question

Tips for typing the HTML tag as text inside a span element with Angular

When retrieving the value "Evidence" from an API, it looks like "

<FORM METHOD="get" ACTION="search">

"

{
    data: {
        evidence:<FORM METHOD="get" ACTION="search">
    }
}

In my TypeScript file:

public evidence : any;
    
getEvidence(){
    this.service.getevidence().subscribe(data => {
        this.evidence= data.data.evidence                  // The value is stored here
    });

In the HTML file:

<span [innerHTML]="evidence"></span>

I would like to display the value but I am encountering the issue:

WARNING: sanitizing HTML stripped some content

angular typescript angular6 angular7

Answer 1

Answer №1

To avoid sanitizing within the component itself,

app.component.ts :

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

public information : any;

constructor(private _sanitizer:DomSanitizer) {}

bypassContent(value:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
}

retrieveInformation(){
    this.service.getinformation().subscribe(data => {
        this.information= bypassContent(data.data.information);
    });
}

Alternatively, you can create a pipe for reusability purposes,

sanitizeHtml.pipe.ts :

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(value:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }
}

app.component.html :

<span [innerHTML]="information | sanitizeHtml"></span>

Answer 2

To avoid sanitizing within the component itself,

app.component.ts :

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

public information : any;

constructor(private _sanitizer:DomSanitizer) {}

bypassContent(value:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
}

retrieveInformation(){
    this.service.getinformation().subscribe(data => {
        this.information= bypassContent(data.data.information);
    });
}

Alternatively, you can create a pipe for reusability purposes,

sanitizeHtml.pipe.ts :

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

  transform(value:string):SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(value);
  }
}

app.component.html :

<span [innerHTML]="information | sanitizeHtml"></span>

Tips for typing the HTML tag as text inside a span element with Angular

Answer №1

Similar questions

Configuring the CKEditor edit functionality in Angular 2

Issues encountered with Angular project when deploying on NGINX across various directories

Incorporate a visual element into an Angular Library Component Template using an image asset

Retrieve an additional 10 items from the API when the button in the Angular list is clicked

What are the reasons for being unable to utilize display flex within Angular?

Managing the state of forms using NGRX and @Effects

Is there a way for me to showcase a particular PDF file from an S3 bucket using a custom URL that corresponds to the object's name

Learn how to display data from the console onto an HTML page using Angular 2

The Angular-cli is unable to link to the Bootstrap framework

Using TypeScript with Mongoose: Issue with finding documents conditionally on model results in error: Union type signatures are not compatible

Limiting the image width of ngx-image-cropper to the popup container dimensions

Angular Typescript filter function returning an empty arrayIn an Angular project, a

"Twice the charm: Angular routing resolver runs not once

How to modify attributes using ng-content in Angular 2

How to efficiently filter an array containing nested objects using TypeScript

Is it feasible to securely remove an item from an array within an object without the need for any assertions in a single function?

Is it necessary to use an EventEmitter explicitly when performing two-way binding in Angular 2?

Determine if the grid is accurately sorted in sequence using Cypress

What causes a hyperlink to take longer to load when using href instead of routerLink in Angular 2+?

Angular 4 is having trouble retrieving the JSON response