Angular 11 Custom Markdown Pipe Tutorial

How to render markdown as HTML in angular, in this step by step guide, we will share with you how to create a simple custom markdown pipe in Angular using the marked package.

Marked is a great package; it is developed for speed. You can use it for a low-level markdown compilation for parsing markdown without caching in the angular app.

Angular ecosystem gives greater flexibility in terms of faster development of applications. This notable framework has sublime architecture and comes with powerful tooling, immaculate code, and greater scalability. Its platform-centric philosophy gives you an easy way to create projects faster.

Out of numerous features, we are going to explain Pipes. Pipes are useful for converting multiple types of data such as strings, currency amounts, dates and even more. Pipes are simple functions that are added into template expressions. Theoretically, they take the input value and recklessly transform the value and directly return that value. There are ready-made pipes, and we can also create custom pipes to transform the data.

In this tutorial, you will learn how to create a custom markdown pipe to parse the HTML in Angular using the marked plugin without getting a headache.

Angular 11 Custom Markdown Pipe Example

  • Step 1: Install Angular App
  • Step 2: Install Marked HTML Parser Package
  • Step 3: Create Custom Angular Pipe
  • Step 4: Register Custom Markdown Pipe
  • Step 5: Parsing Markdown into HTML
  • Step 6: Run Angular Project

Install Angular App

We assume you have already installed Angular CLI, further run the following command to install the app:

ng new ng-demo

Move inside the app directory:

ng new ng-demo

Install Marked HTML Parser Package

Subsequently, move to the terminal window and execute the command to install the Markdown package in Angular:

npm install marked

Create Custom Angular Pipe

You can generate a new pipe using the suggested command:

ng generate pipe custom-markdown

Now, there are two files generated inside the app folder; you have to open the custom-markdown.pipe.ts file and update the provided code:

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

@Pipe({
  name: 'customMarkdown'
})

export class CustomMarkdownPipe implements PipeTransform {

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

}

At the top of the custom pipe template, import the marked module, and return the marked into the transform method.

Register Custom Markdown Pipe in App Module

Now ideally we have to register the CustomMarkdownPipe in app.modulet.ts config file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { CustomMarkdownPipe } from './custom-markdown.pipe';

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

export class AppModule { }

Parsing Markdown into HTML

Open the app.component.ts file and update the provided code:

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

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

export class AppComponent {
  
  public quote: string = '***Make right desire and he will approach you in the highest way.***';
  public question: string = 'Have you seen **WandaVision** yet.';

}

Add the displayed code in app.component.ts file:

<p [innerHTML]="quote | customMarkdown"></p>

<p [innerHTML]="question | customMarkdown"></p>

Define [innerHTML] directive, within the option add thE defined variable also declare the custom markdown pipe name to parse the markdown into HTML.

Run Angular Project

Let us execute the recommended command to create the build similarly serve the application:

ng serve

The following url displayed on the terminal, add it into the browser and start the app:

http://localhost:4200

Conclusion

The Angular custom markdown pipe tutorial is finished; in this tutorial, we discovered how to parse markdown into HTML using a custom markdown pipe in the angular app using the marked library.