I’ve recently started learning Angular 5. As part of putting together an application as practice, I found myself needing to write a brief help page to describe to users how to use the application and what the various buttons mean. I could’ve done this in pure-HTML but I find Markdown far easier to read and maintain.

Whilst numerous libraries already exist to convert Markdown to HTML, I couldn’t find an Angular directive to provide Markdown to HTML conversion for Angular components. Using the marked, I knocked together a quick Attribute Directive to wrap this together.

The directive is as below - the only dependency is the marked library which can be installed with:

npm install --save marked

And here is the full source code.

Though we access the content of the tagged element using the nativeElement, it uses Renderer2 to write changes back to the tagged element. Writing to the DOM using an ElementRef is discouraged and using Renderer2 is preferred as described in the angular.io core documentation.

See the below StackBlitz project for an example of its usage.