Angular Custom Markdown Pipe Example

By Hardik Savani | March 17, 2021 | Category : Angular


Hi,

In this tutorial we will go over the demonstration of how to create markdown pipe in angular. i would like to share with you angular markdown to html pipe. Here you will learn angular custom markdown pipe example. We will look at example of angular markdown pipe example.

if you have question what is markdown then i will show you. Markdown is an uncomplicated text format whose purpose is to be relentless to read and write, even when not converted to HTML. in this example we will use npm marked package to parse html. so let's see bellow step by step example.

you can easily create custom pipe for markdown convert html in angular 7, angular 8, angular 9, angular 10 and angular 11 version.

Step 1: Create New App

If you are doing example from scratch then You can easily create your angular app using bellow command:

ng new my-app

Step 2: Install marked package

In this step, we will install marked npm package.

npm i marked

Step 3: Create Custom Pipe

We need to run following command to creating pipe in angular application.

ng generate pipe markdown

Now we need to write some logic on our custom pipe ts file. so let's write logic as i written for demo now.

app/markdown.pipe.ts

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

import 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;

}

}

now it should be import in module.ts file as bellow:

app/app.module.ts

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

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

import { AppComponent } from './app.component';

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

@NgModule({

declarations: [

AppComponent,

MarkdownPipe

],

imports: [

BrowserModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Step 4: Use Custom Pipe

Now we need to create one variables and use it, let's add code as like bellow:

app/app.component.ts

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

public title: string = '**The Big Post Angular**';

public body: string = 'Custom **Markdown in Angular** example!';

}

Ok, now we can use 'markdown' custom pipe in html file, so let's write it.

app/app.component.html

<div class="container-fluid">

<h1>Angular Markdown Custom Pipe Example - ItSolutionStuff.com</h1>

<h1 [innerHTML]="title | markdown"></h1>

<p [innerHTML]="body | markdown"></p>

</div>

Output:

I hope it can help you...



Tags : Angular


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: