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?