Live previews
A running component beside the source that produced it.
<blasdoc-code-preview> renders a running component and the source that
produced it, from one representation.
Writing one
<blasdoc-code-preview>
<app-button variant="primary">Comprar</app-button>
</blasdoc-code-preview><app-button variant="primary">Comprar</app-button>Why they cannot drift
The preview is the IR handed to the Angular renderer. The code is that same IR's source, sliced out of the document's own text using the positions the parser preserved.
Source → Parser → IR → { Angular runtime , Source renderer }The alternative — rendering the component and serialising the DOM back to a
string — is what Blasdoc refuses to do. The DOM is not the source: it has lost
the difference between variant="primary" and [variant]="tone" before you
ever get to read it.
Interaction works
A preview is a real component, bound to the page's own context, so events and bindings behave exactly as they do outside it:
<app-button (clicked)="bump()" variant="primary">Pressed {{ count }} times</app-button>Everything sharing a context refreshes together — an event inside a preview updates the prose outside it, and the other way round.
Anything, not just components
A preview shows whatever is inside it, Markdown included:
<blasdoc-code-preview>
<div>Plain HTML works too.</div>
</blasdoc-code-preview>