'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 require
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?
Solution 1:[1]
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>
Solution 2:[2]
After lot of trail and errors ,there is one more approach for dynamic rendering of markdown using ngx-markdown package via http calls.
use httpclient to make http call for md files
import { HttpClient } from '@angular/common/http';
import { MarkdownService } from 'ngx-markdown';
export class AppComponent {
title = 'personal-blog';
markdownRaw ='';
markdown='';
constructor(private mdService:MarkdownService, private _httpClient:HttpClient){}
async ngOnInit() {
this.markdownRaw = await this._httpClient.get(`/assets/hello.md`, {
responseType: 'text'
}).toPromise();
this.markdown=this.mdService.compile(this.markdownRaw);
}
onLoad(data:any){
console.log(data);
}
onError(data:any){
console.log(data);
}
}
Now use the declared and initialized variable as data property in markdown directive.
<markdown [data]="markdown" (load)="onLoad($event)" (error)="onError($event)"></markdown>
Solution 3:[3]
In general, you can load md files as string with the HTTP client
async ngOnInit() {
this.md = await this.http.get(`/assets/posts/1.md`,
{ responseType: 'text'}).toPromise();
}
Live editor example
Source
https://fireflysemantics.medium.com/loading-markdown-files-with-the-angular-httpclient-155e31acab68
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | penleychan |
Solution 2 | |
Solution 3 | Royer Adames |