Search code examples
angularinclude

Display content of text file inside Angular 7 web interface

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>
Solution

  • 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.