How to dynamically render a markdown file in Angular?

I'm trying to write an Angular component that renders markdown files as part of the webpage, using the ngx-markdown library. Looking at the library's official demo, it has a list of files that it requires, which are then rendered from:

From the demo's app.component.ts:

blockquotes = require('raw-loader!./markdown/blockquotes.md');
codeAndSynthaxHighlighting = require('raw-loader!./markdown/code-and-synthax-highlighting.md');
emphasis = require('raw-loader!./markdown/emphasis.md');
headers = require('raw-loader!./markdown/headers.md');
horizontalRule = require('raw-loader!./markdown/horizontal-rule.md');
images = require('raw-loader!./markdown/images.md');
links = require('raw-loader!./markdown/links.md');
lists = require('raw-loader!./markdown/lists.md');
listsDot = require('raw-loader!./markdown/lists-dot.md');
tables = require('raw-loader!./markdown/tables.md');


And from the demo's app.component.html:

<!-- HEADER -->
<section id="headers">
<h2 class="subtitle">Headers</h2>

<pre>{{ headers }}</pre>

<markdown>{{ headers }}</markdown>
</section>


There are other sections that read from the other requires, but the syntax is the same.

What I'm trying to do is to have a method that changes which file the <markdown> tag reads from. Here's what I have so far:

// Markdown variable.
markdown;

ngOnInit() {
this.setMarkdown('home.md');
}

setMarkdown(file: string) {
const path = 'raw-loader!./assets/markdown/' + file;
this.markdown = require(path);
}


I'm obviously doing something wrong, since I get a compiler error:

ERROR in src/app/app.component.ts(24,21): error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.


What am I doing wrong, and how would I go about writing a method that changes the markdown source and actually works?

Continue reading...