How to Add Markdown Preview in an Angular Component

Question

If you're building a blog platform, CMS, or note-taking app in Angular, it's often helpful to let users write Markdown and instantly preview how it will render. This guide will show you how to:

• Install the necessary packages
• Display a live Markdown preview
• Use ngx-markdown with Angular's standalone or module-based setup

Let’s dive in.

---

Step 1: Install ngx-markdown and @angular/common/http

First, install the required dependencies:

npm install ngx-markdown

You also need Angular’s HttpClientModule because ngx-markdown uses it for loading external files and rendering.

---

Step 2: Configure the Module or Bootstrap Setup

Option A: If you're using NgModule (traditional Angular)

In your AppModule:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { MarkdownModule } from 'ngx-markdown';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    MarkdownModule.forRoot() //  required for markdown service
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Option B: If you're using Standalone Components (Angular 15+)

In your main.ts:

import { bootstrapApplication } from '@angular/platform-browser';
import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';
import { HttpClientModule } from '@angular/common/http';
import { MarkdownModule } from 'ngx-markdown';
import { BrowserModule } from '@angular/platform-browser';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      BrowserModule,
      HttpClientModule,
      MarkdownModule.forRoot()
    )
  ]
});

---

Step 3: Create the Markdown Preview Component

Here’s a simple Angular component that lets users type Markdown and see a live preview.

markdown-preview.component.ts (Standalone)

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MarkdownModule } from 'ngx-markdown';

@Component({
  selector: 'app-markdown-preview',
  standalone: true,
  imports: [CommonModule, FormsModule, MarkdownModule],
  template: `
    <h2>Markdown Editor</h2>
    <textarea [(ngModel)]="markdown" rows="10" cols="50"></textarea>

    <h3>Preview</h3>
    <div class="preview">
      <markdown [data]="markdown"></markdown>
    </div>
  `,
  styles: [`
    textarea {
      width: 100%;
      font-family: monospace;
      margin-bottom: 1rem;
    }
    .preview {
      border: 1px solid #ccc;
      padding: 1rem;
    }
  `]
})
export class MarkdownPreviewComponent {
  markdown = `# Hello Markdown \n\nWrite something *awesome*!`;
}

If you’re using NgModule, declare this component in the module and add FormsModule and MarkdownModule to imports.

---

Output

You’ll get:

• A text area where users type Markdown
• A live preview rendered below using ngx-markdown

It supports all common Markdown syntax: headings, lists, code blocks, links, images, etc.

---

️ Bonus: Security Considerations

By default, ngx-markdown sanitizes content using Angular’s DomSanitizer. If you need custom security (e.g., allow raw HTML), you can configure it during MarkdownModule.forRoot() — but be cautious to avoid XSS vulnerabilities.

---

Conclusion

With just a few dependencies and a simple component, you can provide a full-featured Markdown editor with preview in Angular.

Let your users write expressive content with ease!

---