Angular Library
Use @myriaddreamin/typst.angular.
Import the angular module containing the typst-document component.
/// component.module.ts
import { TypstDocumentModule } from '@myriaddreamin/typst.angular';
/// component.module.ts
import { TypstDocumentModule } from '@myriaddreamin/typst.angular';
And use directive typst-document in your template file.
<typst-document props></typst-document>
<typst-document props></typst-document>
The typst-document component
Typical usage
<typst-document
fill="#343541"
artifact="{{ artifact }}">
</typst-document>
<typst-document
fill="#343541"
artifact="{{ artifact }}">
</typst-document>
fill property
Fill document with color.
<typst-document fill="#343541">
</typst-document>
<typst-document fill="#343541">
</typst-document>
Note: Current typst.ts doesn't support a transparent background color in some browsers.
artifact property
Render the document with artifact from precompiler.
<typst-document artifact="{{ artifact }}">
</typst-document>
<typst-document artifact="{{ artifact }}">
</typst-document>
The artifact can be only in Vector Format to this time.
To get artifact data, please refer to Command Line Interface or All-in-one Node.js Library.
Set renderer initialization option for typst-document
Retrieve a typst.InitOptions for initializing the renderer for typst-document
typst-document.setWasmModuleInitOptions({
getModule: () =>
'http://localhost:20810/typst_ts_renderer_bg.wasm',
});
typst-document.setWasmModuleInitOptions({
getModule: () =>
'http://localhost:20810/typst_ts_renderer_bg.wasm',
});
The default value is:
{
beforeBuild: [],
getModule: () => '/assets/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
{
beforeBuild: [],
getModule: () => '/assets/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
Example: show document
See typst.angular demo for more details.