Retrieve the value of [innerHTML] from a subcomponent

Question

Retrieve the value of [innerHTML] from a subcomponent

I am trying to retrieve the [innerHTML] from a child component

Greetings everyone

There is a component named 'contact-us' containing the following field.

<div [innerHTML] = "legalContent.disclaimer"></div>

I have included this component in another one. However, the innerHTML value does not appear in my child component.

This is the code in my contact.ts file:

async getLegalContent()  {
this.legalContent = await this.legalService.getLegaPages().toPromise();
this.legalService.legalInfo = this.legalContent;
 }

An API call is made within the legal service to fetch the data.

Could anyone provide assistance in resolving this issue?

angular innerhtml

Answer 1

Answer №1

To ensure Angular blocks potentially harmful HTML content that you want to set in the innerHTML, you can utilize the DomSanitizer with a custom pipe:

Create a Custom Pipe

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

Then, use it in your code like this:

<div [innerHTML] = "legalContent.disclaimer | safeHtml"></div>

Your secure content should now be displayed properly.

Answer 2

To ensure Angular blocks potentially harmful HTML content that you want to set in the innerHTML, you can utilize the DomSanitizer with a custom pipe:

Create a Custom Pipe

@Pipe({name: 'safeHtml'})
export class Safe {
  constructor(private sanitizer:DomSanitizer){}

  transform(style) {
    return this.sanitizer.bypassSecurityTrustHtml(style);
    //return this.sanitizer.bypassSecurityTrustStyle(style);
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs
  }
}

Then, use it in your code like this:

<div [innerHTML] = "legalContent.disclaimer | safeHtml"></div>

Your secure content should now be displayed properly.

Retrieve the value of [innerHTML] from a subcomponent

Answer №1

Create a Custom Pipe

Similar questions

Exploring ways to send data to WebView in Flutter

Utilizing SCSS variables

The RazorPay callback encountered an Uncaught TypeError indicating that the function is not recognized

Tips for removing the notification that the .ts file is included in the TypeScript compilation but not actively used

Having trouble creating a unit test for exporting to CSV in Angular

Encountering a 500 error (Internal Server Error) while trying to connect API Laravel 5.4 with Angular 2

Arrange the "See More" button in the Mat Card to overlap the card underneath

Unable to initialize default values on Form Load in Angular Reactive Forms

Using a reactive form in Angular 12, the selected form group is initialized with an empty array

Sending JSON information from the App Component to a different component within Angular 6

Is jest the ideal tool for testing an Angular Library?

Having issues with autocompletion in the input element of Angular 7 Material Design

Angular observable will only receive data once during initialization

Utilize ngx-translate with an array as interpolation values

Creating a new JavaScript object using a Constructor function in Typescript/Angular

Retrieve error information from ResponseContentType.Blob request type

What is a way to perform pre-increment without utilizing the ++I operator?

Perform simple arithmetic operations between a number and a string using Angular within an HTML context

Here is a guide on showcasing information obtained from ASP.NET API in Angular version 13

The functionality of Angular 9 Service Worker appears to be inhibited when hosting the site from a S3 Static Website