MRender
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
Example view controller
Angular components rendered inside ng-component can inject EXAMPLE_VIEW from @foblex/m-render.
It exposes:
isFullscreen: signal that updates when preview enters or exits fullscreen modeshowLoading(): shows loading overlay over current example viewhideLoading(): hides loading overlay
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.