← Back to Archive

Embedding Interactive Components in Markdown

Learn how to use Analog's new Markdown Components (MDC) to embed live Angular components in your blog posts.

Embedding Interactive Components in Markdown

Interactive Demos in Blog Posts

AnalogJS allows making your content interactive. Instead of just static code blocks, you can now embed real Angular components via Custom Elements.

Live Counter Demo

Below is an interactive counter component embedded directly via a Custom Element:

How it works

The custom element is registered in main.ts using Angular Elements. When the browser encounters this tag in the rendered Markdown, it instantiates the corresponding Angular component.

All attributes on the tag are passed as Inputs to the Angular component (mapped to kebab-case).

Enjoy building interactive content with Analog!