Markdown Angular

Posted on  by admin

Angular is known for its facile infrastructure. Theoretically, every work is possible on this powerful yet flexible framework. In this tutorial, we will learn how to profoundly render Markdown as HTML in Angular 11 or even the more previously developed versions.

Apparently, this could be done through many other methods; however, i am going to lay down the foundation using the custom Angular Pipe.

Markdown angularjsMarkdown Angular

We will also use the marked plugin, which allows us to convert [Markdown] into HTML. Markdown is an uncomplicated text format whose purpose is to be relentless to read and write, even when not converted to HTML.

Angular markdown editor based on Angular material textarea. The goal of this library is to provide a markdown text editor which sweets the Angular Material Design. Library location: projects/ngx-mat-markdown-text-editor directory of this repository. Working example location: projects/demo directory of this repository. Using markdown component and/or directive, you will be able to use the lineHighlight property to activate the plugin. The property can be used in combination with either data for variable binding, src for remote content or using transclusion for static markdown.

Pipes are usually employed to transform data; they are in use since the inception of Angular 1 and known by the name of filters. But the wind took the turn since Angular 2, and they are called as Pipes.

So, without further ado, let’s start creating a custom Markdown Pipe in Angular 11.

See full list on npmjs.com.

Tutorial

Setting Up New Angular Application

Creating a new angular application can’t be possible without having the Angular CLI installed on your system. So, shoot the command from the command prompt to install global Angular CLI.

Next up, run the command to create an angular application; however, you can skip this step if the app is already installed on your machine.

Navigate to the project root:

Install Marked Parser Package

Install the marked Markdown parser plugin through NPM. Its a low-level and powerful compiler for parsing Markdown without caching or blocking for long periods.

Create Pipe in Angular

Markdown

Head over to the command prompt using the Angular CLI to generate a new Pipe in your Angular application.

Markdown Angular Code

Now, as we can see, there are two pipe files that have been generated. So open the markdwon.pipe.ts file and add the following code inside.

Let me shed light on the above simple logic; the first marked package is imported on top. Then using the transform() method, we are parsing the HTML.

Import Markdown Pipe in AppModule

Markdown Angular Interview

Subsequently, we have to import the MarkdownPipe pipe in app.module.ts file.

Angular Markdown To Html

Finally, we can bring the markdown HTML pipe in action.

Insert the given below code in app.component.ts file.

Pass the text or content value into the [innerHTML] directive with a markdown pipe name. Add the given below code in app.component.html file.

Run the Angular project and see the output.

Angular markdown to html

The Bottom Line

Eventually, we raised the curtain from the secrets of building the custom Markdown pipe in Angular application. One thing is for sure that we understood the concept of parsing the Markdown in HTML.