Create Custom Markdown Pipe in Angular 10 to Parse HTML

Last updated on by Digamber

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 10|9|8 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.

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.

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 10/9.

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.

npm install -g @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.

ng new angular-markdown-pipe-example

Navigate to the project root:

cd angular-markdown-pipe-example

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.

npm i marked

Create Pipe in Angular

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

ng generate pipe marked

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.

import { Pipe, PipeTransform } from '@angular/core';
import * as marked from "marked";

@Pipe({
  name: 'markdown'
})

export class MarkdownPipe implements PipeTransform {

  transform(value: any, args?: any[]): any {
    if (value && value.length > 0) {
      return marked(value);
    }
    return value;
  }

}

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

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { MarkdownPipe } from './markdown.pipe';

@NgModule({
  declarations: [
    AppComponent,
    MarkdownPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

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

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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  public name: string = '**The Big Bang Theory**';
  public text: string = 'Custom **Markdown in Angular** example!';
}

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.

<h1 [innerHTML]="name | markdown"></h1>
<p [innerHTML]="text | markdown"></p>

Run the Angular project and see the output.

ng serve --open

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.