Introduction

What is MRender?

Getting Started

Writing

Markdown Extensions

Examples

Examples Overview

TOC Disabled + Wide

ng-component Demo

Code Group and Alerts

Code Features Playground

MRender

Docs Showcase Blog Releases

Example: ng-component Demo

This page demonstrates both modes of ng-component:

Angular component rendering
URL iframe rendering

Prerequisites

Register component aliases in your configuration.
Ensure source links are reachable in browser.
Ensure iframe URLs allow embedding.

Register components

Angular component mode

[component.html] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/add-node-from-palette/add-node-from-palette.component.html [component.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/add-node-from-palette/add-node-from-palette.component.ts [component.scss] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/add-node-from-palette/add-node-from-palette.component.scss

URL iframe mode

[sample.ts] <<< https://raw.githubusercontent.com/Foblex/f-flow/main/projects/f-examples/extensions/add-node-from-palette/add-node-from-palette.component.ts

Validation steps

Confirm preview renders for component mode.
Confirm source tabs open and switch correctly.
Confirm iframe mode renders external page.
Confirm full-screen toggle works in both modes.

Notes

Full-screen mode is available in preview controls.
Some external URLs may block iframe embedding via CSP or X-Frame-Options.
If preview is empty, verify component alias registration and import path.

In this article