Use Marked in Angular2

We can use ngx-markdown to create markdown editor, Below are the steps to achieve it:

1. Install the package

Open your terminal and navigate to your project dictionary and run the following command:

npm install ngx-markdown marked@^4.3.0 --save
npm install @types/marked@^4.3.0 --save-dev

2. Configuration

Open your angular.json file and below script in script section:

"scripts": [
        "node_modules/marked/marked.min.js"
]

Open app.module file and import the ngx-markdown into it and add it in imports.

import { MarkdownModule } from 'ngx-markdown'
   
   @NgModule({
   imports: [
       MarkdownModule.forRoot(),
   ],
    })

3. Now open your app.component.ts or in which component you want to use it and declare a variable which will hold marked data.

public markedData = “Some marked data”;

You can call your api through the service to get marked data or you can read any .md file and assign that into the markedData variable.

4. Now open your app.component.html file and add the below code into it.

<markdown [data]=”makedData”></markdown>

5. Now run ng serve and you will be able to see marked content converted into HTML.