I am looking for a way to show markup document texts from a file in asset folder in html as a pop-up in Angular

Question

Text File Data ->

<b>Test</b>

Here is the angular html snippet i tried. Code

<embed src=".\assets\docs\about\BRANCH_MASTER.txt">-->
        
        <object data=".\assets\docs\about\BRANCH_MASTER.txt">
          Not supported
        </object>

Output

<b>Test</b>

Problem is markup tags not serializing. It is showing as it is. Is there any way to access asset file content. And Show them in html?

Answer 1

You have to do two things

First, retrieve data from the file. Use HttpClient to make an HTTP GET request to retrieve the content of the file test.txt. The responseType is set to 'text' to ensure that the response is treated as plain text.

  content = "";
  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('assets/test.txt', {responseType: 'text'})
      .subscribe((data) => this.content = data);
  }

Second, bind the data to a variable and use innerHTML to display it in the template.This will render the contents of the file as HTML within the element.

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