Load asset file inside page template with Ionic

I have a page, ContentPage, that shows the contents of a static file of my app. The html file of my page is the following (content.html):

<ion-header>
  <ion-navbar>
    <ion-title>{{ lessonNumber }} - {{ pageNumber }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  
  <!-- TXT CONTENT GOES HERE -->
  {{ txtContent }}

</ion-content>

My static files are under src/assets/txts/

src
|_ app
|_ assets
   |_ txts
      |_ 1.txt
      |_ 2.txt
      |_ 3.txt
      |_ ...
|_ pages
|_ ...

When the ContentPage is open I need to get one of the txt files, such as 1.txt, and load his contents inside the content.html page.

This is my page code:

import {Component} from "@angular/core";
import {IonicPage} from "ionic-angular";

@IonicPage()
@Component({
  selector: 'page-content',
  templateUrl: 'content.html',
})
export class ContentPage {

  lessonNumber: number;
  pageNumber: number;
  
  txtContent: string = '';

  constructor() {
    //FIXME - get txt contents
    //txtContent = ...
  }

}

How can I do that?

Is there a class or plugin that allows me to get these files?

This exists: https://github.com/ionic-team/ionic-conference-app/blob/96eb3dafa6b12ff11106f9d8a14ac0026dcf6fda/src/providers/conference-data.ts#L18-L25

2 Likes