How to dynamically render a markdown file in Angular?
Base on the documentation https://www.npmjs.com/package/ngx-markdown#directive you can load file via [src]
:
<!-- loaded from remote url -->
<div markdown [src]="'path/to/file.md'" (load)="onLoad($event)" (error)="onError($event)"></div>
Tyll'a
Updated on June 03, 2022Comments
-
Tyll'a about 2 years
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 itrequire
s, 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
require
s, 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?
-
Royer Adames about 2 yearspath is relative.
-
Royer Adames about 2 yearsAlso, if you put your .md files in assets, you can use 'assets/yourfile.md' has the path