Display content of text file inside Angular 7 web interface

Question

I'm quite new to Angular (I'm using Angular 7) and trying to display a (ideally remote) file in some kind of box on my web interface.

Previous posts suggest to use ng-include for that. But whenever I try to use it, I get an error in my console that says

'ng-include' is not a known element:
1. If 'ng-include' is an Angular component, then verify that it is part of this module.
2. If 'ng-include' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </mat-expansion-panel-header>

I'm aware of the double quotation marks when specifying the src. I tried various places to put the file locally and also tried pointing to a remote file URL. I tried wrapping the ng-include into a div or a pre or in nothing at all. But it's always the same error. Do I need to import or load something to be able to use ng-include?

Here's my HTML code at the moment, where I try to display the file content in a Material expansion panel:

<mat-expansion-panel>
    <mat-expansion-panel-header>
        <mat-panel-title>Panel title</mat-panel-title>
    </mat-expansion-panel-header>

    <ng-include src="'test.yml'"></ng-include>
</mat-expansion-panel>

What exactly are you planning on doing by including the `yml` file in the component? — SiddAjmera, Jul 31 '19 at 13:45
Please check this link [enter link description here](https://stackoverflow.com/questions/33749994/dynamic-template-in-templaturl-in-angular2) — Sourav Golui, Jul 31 '19 at 13:46
@ritaj Angular 7. Just added it to the description. @SiddAjmera My plan is to display the remote `yml` file. Some kind of preview inside my GUI. — stefanbschneider, Jul 31 '19 at 13:47
Ah ok. So what's the best way in Angular2+? Do I really need to implement something myself? I can't be the first one who want's to display file contents inside a web app... — stefanbschneider, Jul 31 '19 at 13:53
Do you have a link to the yml file? If yes, can you share the link with me? — SiddAjmera, Jul 31 '19 at 14:06
Let's use this one as example: https://gitcdn.xyz/repo/sonata-nfv/tng-schema/master/function-descriptor/vnfd-schema.yml — stefanbschneider, Jul 31 '19 at 14:10

score 2 · Accepted Answer · answered Jul 31 '19 at 14:13

2

How about using an iframe instead:

<mat-accordion>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <iframe 
      src="https://gitcdn.xyz/cdn/sonata-nfv/tng-schema/2e5dfe070ff9852283eb49a1dd86069e5598cfd2/function-descriptor/vnfd-schema.yml" 
      frameborder="0">
    </iframe>
  </mat-expansion-panel>
</mat-accordion>

Here's a Working Sample StackBlitz for your ref.

answered Jul 31 '19 at 14:13

SiddAjmera

38,129
5
72
110

For me, this doesn't show the content of the file but triggers a download of it. – stefanbschneider Jul 31 '19 at 14:16
Even on the Sample StackBlitz that I've linked above? If yes, which browser are you using? I haven't really come across that behavior. – SiddAjmera Jul 31 '19 at 14:17
Yep, even for the StackBlitz example. I'm using Firefox 68. – stefanbschneider Jul 31 '19 at 14:18
Ah ok seems to be an issue with my browser. It works fine on Chrome. Thanks! – stefanbschneider Jul 31 '19 at 14:19
1

It's probably happening because Firefox is not able to render a yml file as plain text just like chrome does. And so it downloads the file as it doesn't know what else to do with it. This is again something that must be disabled on the browsers and I don't think there's much we can do about it. – SiddAjmera Jul 31 '19 at 14:23
Anyway, if this was the solution to your issue, please consider marking it as an answer to close the loop. :) – SiddAjmera Jul 31 '19 at 14:24

score 2 · Answer 2 · answered Jul 31 '19 at 14:49

i show you how to do it with a new project

new new test

cd test

edit the app.module.ts file and add the HttpClient module

 import { HttpClientModule } from '@angular/common/http'; // <-- add 

 import { AppComponent } from './app.component'; 

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     BrowserModule,
     HttpClientModule // <--- import

`

then edit your 'app.component.ts'.

 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';

 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {

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

   ngOnInit() {
     this.http.get('https://gitcdn.xyz/cdn/sonata-nfv/tng-schema/2e5dfe070ff9852283eb49a1dd86069e5598cfd2/function-descriptor/vnfd-schema.yml',  {responseType: 'text'})
.subscribe((content:string) => this.content = content)
   }
 }

Now edit the app.component.html file

 <div style="white-space: pre">
   {{content}}
 </div>

that should show you the idea of how it wroks

Display content of text file inside Angular 7 web interface

2 Answers2