Use HTML Link in InnerHTML to display that file in Angular

Question

I want to display the links that are stored in a json file like this:

[
    {
        "heading": "Waswas",
        "content": "./waswas.html"
    },

    {
        "heading": "Flu",
        "content":""
    }
]

In my component.ts file I parse that to an array variable like this:

 public treatmentsList:{heading: string, content: string}[] = treatments;

Then in my component.html file I have this:

<div>
    <h1>
        {{treatmentsList[0].heading}}
    </h1>
    <span [innerHTML]="getContent(treatmentsList[0].content) | async"></span>
</div>

But it shows the link instead of the file

The component.ts file:

import { Content } from '@angular/compiler/src/render3/r3_ast';
import { Component, NgModule, OnInit } from '@angular/core';
import { SafeHtml } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { ContentService } from '../content.service';
import treatments from "./treatments.json"

var heading = "hTempl"
@Component({
  selector: 'app-treatment',
  templateUrl: './treatment.component.html',
  styleUrls: ['./treatment.component.css']
})

export class TreatmentComponent implements OnInit {
 public treatmentsList:{heading: string, content: string}[] = treatments;
  
 constructor(
  private readonly contentService: ContentService
)  {}

public getContent(path: string): Observable<SafeHtml> {
  return this.contentService.get(path);
}

  ngOnInit(): void {

  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TreatmentComponent } from './treatment/treatment.component';
import { PrgrefComponent } from './prgref/prgref.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    TreatmentComponent,
    PrgrefComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You'll need to in-line the html in the JSON file, or do an http request to get the html document within your component.ts. — John
– John, Commented Aug 29, 2021 at 6:24
Then you'll need to build a service to fetch the html files and then sanitize them with the dom sanitizer. If you post your full component.ts and component.html I can help further. — John
– John, Commented Aug 29, 2021 at 6:30
Check the network tab in your browser, are you getting an error there? Any console errors? — John
– John, Commented Aug 29, 2021 at 10:43

John · Accepted Answer · 2021-08-29 06:52:01Z

Create a service to fetch your html documents and then sanitize them.

content.service.ts

import { HttpClient, HttpHeaders  } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ContentService {
  constructor(
    private readonly http: HttpClient,
    private readonly sanitizer: DomSanitizer
  ) {}

  public get(path: string): Observable<SafeHtml> {
    const headers = new HttpHeaders({
      'Content-Type':  'text/plain',
    });
    return this.http.get(path, {
      headers,
      responseType: 'text'
    }).pipe(
      // This is unsafe if the path and content is not under your control
      map(html => this.sanitizer.bypassSecurityTrustHtml(html))
    );
  }
}

Then in your component.ts use the service

constructor(
  private readonly contentService: ContentService
)

public getContent(path: string): Observable<SafeHtml> {
  return this.contentService.get(path);
}

Finally your html

<span [InnerHTML]="getContent(treatmentsList[0].content) | async"></span>

Collectives™ on Stack Overflow

Use HTML Link in InnerHTML to display that file in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related