#Angular Markdown renderer quick start

Fluxdown provides standalone Angular components for Markdown. They share the same Core, with static rendering, streaming repair, smooth output, and entrance effects. Themes and plugins let you adjust the presentation.

#Install

pnpm add @fluxdown/angular

Use Angular 22. Add the component to imports and pass Markdown through its template input:

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

@Component({
  selector: 'app-article',
  imports: [Fluxdown],
  template: `<fluxdown [text]="text" />`,
})
export class Article {
  readonly text = '# Hello, Fluxdown\n\nLet the words unfold.';
}

Component styles are included; no separate stylesheet import is needed. Import Fluxdown from @fluxdown/angular.

#Receive streaming content

text always contains everything received so far. Enable streaming while content is growing, then set it to false when the stream ends:

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [text]="text()" [streaming]="pending()" />`,
})
export class Message {
  readonly text = input.required<string>();

  readonly pending = input(false);
}

Angular synchronizes content when inputs change. Your application manages requests and message state; the component handles presentation.

#Choose a preset

See the plugin matrix for the complete list. Continue with streaming to control output, or styling to adjust appearance.

Use the side-by-side demo to compare static and streaming output with other renderers.