#Configuration

This page lists the Angular components’ public inputs. Only text is required; FluxdownRaw also requires plugins. The remaining inputs are the same for Full, Lite, and Raw.

Import BaseBuildConfig, StreamingConfig, SmoothConfig, EffectItem, Theme, and FluxdownRef from @fluxdown/angular. Import IPluginItem and AngularRenderNode from @fluxdown/angular-plugins/typings.

#text

Type: string · Required

The complete Markdown received so far. Append incoming chunks to the existing text instead of passing only the latest chunk.

<fluxdown [text]="text()" />

#streaming

Type: boolean | StreamingConfig · Default: false

true enables ending repair, smooth output, and the default scale animation. false disables streaming behavior. Use an object to control them separately:

<fluxdown
  [text]="text()"
  [streaming]="{ repairEnding: true, smooth: true, effect: 'scale' }"
/>

See streaming for connecting a data source and ending a stream.

#streaming.repairEnding

Type: boolean · Default: true

Repairs unfinished syntax at the end of the stream. false only disables ending repair; build.repair: false disables all repair plugins.

#streaming.smooth

Type: boolean | SmoothConfig · Default: true

Reveals new content gradually. true uses the built-in spring scheduler; false displays received content immediately. Use an object to choose a ticker and scheduler:

<fluxdown
  [text]="text()"
  [streaming]="{
    smooth: { enabled: true, ticker: 'raf', scheduler: 'spring' },
  }"
/>

#smooth.enabled

Type: boolean · Default: false

When using a smooth object, explicitly set this to true to enable smoothing.

#smooth.ticker

Type: 'raf' | 'interval' | SmoothTickerClass · Required for object configuration

raf follows animation frames; interval uses a timer. A custom ticker class is also accepted.

#smooth.scheduler

Type: 'spring' | SmoothSchedulerClass · Required for object configuration

Controls how much content each update reveals. spring uses the built-in spring scheduler; custom scheduler classes are also supported.

Import SmoothTickerClass and SmoothSchedulerClass from @fluxdown/core-plugins/plugins/mapper/smooth. In most cases, smooth: true is sufficient.

#streaming.effect

Type: boolean | EffectItem | EffectItem[] · Default: 'scale'

Choose scale, shad, chunk, or suffix, or combine effects in an array. true selects the default effect; false disables animations. See animation effects for configuration and examples.

Import effect configuration types from their mapper entry, such as ScaleConfig from @fluxdown/core-plugins/plugins/mapper/scale.

#build

Type: BaseBuildConfig · Default: {}

Selects Markdown compilation features. Tables, task lists, strikethrough, autolinks, and ordinary line breaks are available by default. All fields below are optional:

<fluxdown [text]="text()" [build]="{ tex: true, footnote: true }" />

You usually do not need idPrefix. If you set it manually, use a different value for each instance so footnote links stay within their own content.

HTML in Markdown is checked and sanitized. The default allowed tags are span, u, br, em, and a. See rehype plugins to adjust this.

#theme

Type: Theme · Default: 'light'

Accepts three forms:

• 'light' or 'dark': a built-in theme.
• PartialThemeConfig: token overrides on top of the light theme.
• ['light' | 'dark', PartialThemeConfig]: token overrides on the selected preset.

Import ThemeTokens and PartialThemeConfig from @fluxdown/angular. See styling for complete examples.

#plugins

Type: IPluginItem | IPluginItem[] · Default: []

Full and Lite merge presets with your plugins, with later entries taking precedence. Raw requires this input. Each object describes a plugin pack:

Each list item can be a plugin or [Plugin, options]. disabled: true disables it; lower priority values run earlier. See plugins for declarations, composition, and configuration.

#patches

Type: IPatchItem<AngularRenderNode>[] · Default: []

Replaces a text range or inserts custom content at a position. Use it to turn mentions or references into interactive elements:

import type { AngularRenderNode } from '@fluxdown/angular-plugins/typings';
import type { IPatchItem } from '@fluxdown/core';

import { Component } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';
import { createElement } from '@fluxdown/angular-plugins/base';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [patches]="patches" text="欢迎，@Ada。" />`,
})
export class Message {
  readonly patches: IPatchItem<AngularRenderNode>[] = [
    {
      key: 'person-ada',
      range: [3, 7],
      render: () => {
        return createElement('a', { href: '/people/ada' }, '@Ada');
      },
    },
  ];
}

Import IPatchItem from @fluxdown/core, AngularRenderNode from @fluxdown/angular-plugins/typings, and createElement from @fluxdown/angular-plugins/base.

Positions use source-string indices. Keep ranges within one content block and avoid overlapping ranges. You can also return Angular components or templates with createComponentNode and createTemplateNode; see render plugins.

#Component references

Use Angular’s viewChild to read the component. After initialization, value provides the reactive handle for Core’s rendered output. Ordinary rendering does not require it:

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

@Component({
  selector: 'app-article',
  imports: [Fluxdown],
  template: `<fluxdown text="# Hello" />`,
})
export class Article {
  readonly content = viewChild.required(Fluxdown);

  constructor() {
    afterNextRender(() => {
      const nodes = this.content().value.value;

      console.log(nodes);
    });
  }
}

Fluxdown cleans up its internal subscriptions when the component is destroyed. Unsubscribe from any subscriptions you create yourself. See styling for container layout and appearance.