Angular bind html to div without using iframe

Question

I have an angular app. Now I have a link like https://example.com/Exam/denemedir.html . I want to bind this html to div element without using iframe, because I want to effect css code in page.css in angular app. With Iframe css codes doesn't work

This is my html code

<ion-content>
      <div class="text-center head">
        <a routerLink="/subjects"><i class="fa fa-lg fa-arrow-left"></i></a>
        <h5>{{subject.name}}</h5>
        <a class="home" routerLink="/home"><i class="fa fa-lg fa-home"></i></a>
      </div>
      <div class="content"[innerHTML]="content | safe : 'html'" ></div>
 </ion-content>

this is my safe pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}
 
 public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
            case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
            case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
            case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
            case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
            case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
            default: throw new Error(`Invalid safe type specified: ${type}`);
        }
  }

}

but I don't know how to bind this url html to div element. Is there any way to bind html from url ?

can you elaborate on CSS part more ? what exactly you want ? — micronyks
– micronyks, Commented Aug 1, 2020 at 21:22
I have one panel In panel I create html for mobile app. I create html file in panel. In mobile app I want embed this html. Both part have same css codes. so I want to bind this html code to mobile app. I want to use database as a last choice. If possible I want to save as html in panel part and store just html name inside database rather that whole html string — Cagri Tacyildiz
– Cagri Tacyildiz, Commented Aug 1, 2020 at 21:29

vuaam · Accepted Answer · 2020-08-01 21:49:34Z

3

maybe this is what you need: https://stackoverflow.com/a/56969578/5576972

which gives something like:

HTML:

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

ts:

  myHtml:SafeHtml="";
  constructor(
      private sanitizer: DomSanitizer,
    private httpClient: HttpClient,
  ) {
  }

  async updateHtml(){
let newHtml = await this.httpClient.get(url, {responseType: "text"}).toPromise();

    this.myHtml =  this.sanitizer.bypassSecurityTrustHtml(newHtml);
  }

edited Aug 1, 2020 at 21:49

answered Aug 1, 2020 at 21:42

vuaam

463 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular bind html to div without using iframe

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related