0

I am using Angular 7. I want to invoke an URL which returns HTML (that basically renders map from a site).

Through the below program, I am able to hit the External Server URL (http://localhost:3344/webappbuilder/apps/8) and it generates a blob (returning text/html).

I want to manipulate the blob and place it on div to display the the html in the form of map.

May I know how I can manipulate the blob and render the results(HTML) as map on Angular 7.

and also let me know:

How can I load an external HTML file (http://localhost:3344/webappbuilder/apps/8/index.html) on my Angular page (Angular 7)?

Gonçalo Peres
  • 11,752
  • 3
  • 54
  • 83
Suresh Kumar
  • 11
  • 2
  • 3
  • Possible duplicate of [In RC.1 some styles can't be added using binding syntax](https://stackoverflow.com/questions/37076867/in-rc-1-some-styles-cant-be-added-using-binding-syntax) – rijin Dec 06 '18 at 11:15
  • You could try to import something like cheerio to give you an API for adding the raw html into a variable and using jquery-like syntax to manipulate the "dom". And then you'd need to run that through angular's sanitizer to bypass security so you can inject it into a div on the template. – Joshua Terrill Dec 29 '18 at 00:36

2 Answers2

0

You should be able to bind the value that you get into the [innerHTML] of a div.

In the component code, you need to get the text into a string:

htmlTemplate = '<h1>Test Html</h1>';

Then, you can bind the innerHTML of an existing component.

<div [innerHTML]="htmlTemplate"></div>

Find the StackBlitz example here: https://stackblitz.com/edit/angular-xcr1jk

nipuna-g
  • 6,252
  • 3
  • 31
  • 48
0

You can add it using innerHTML

<div [innerHTML]="htmlTemplate"></div>

But you need to sanitize if you are doing this.

DomSanitizer helps preventing Cross Site Scripting Security bugs (XSS) by sanitizing values to be safe to use in the different DOM contexts.

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

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

  transform(html) {
    return this.sanitizer.bypassSecurityTrustStyle(html);
  }
}

Like this

<div [innerHTML]="htmlTemplate | safeHtml"></div>

You can get more reference in below link about sanitizing HTML and styles etc.

refer: In RC.1 some styles can't be added using binding syntax

rijin
  • 1,709
  • 12
  • 21