Base class for all fyord components

fyord g c NewComponent


Id: string
A unique id assigned to a component's root div.


get Element(): HTMLElement | null
Property returning the rendered component root element if rendered or null if not rendered. Use this if you need to access a component's rendered output directly.


State = new EventStore<any>()

Manages local component state. Can be accessed directly to get and set values, subscribe to changes, inspect the event store's ledger, and even undo/redo changes.

For more details, visit the tsbase EventStore docs.

Most of the time, you'll want to utilize this store through the @State decorator - learn more in State decorator docs.


App = App.Instance()

Provides access to the fyord App singleton instance. Within a component, you may reference the app to access app state, router, and more.

See App Docs for more details.


Ids(key: string): string
Maps and returns a unique id for the given key. Use this method when you need a unique key scoped to a given component.
<input id={this.Ids('myInput')}>

const inputValue = document.getElementById(this.Ids('myInput'));


Render(route?: Route, includeWrapper = true): Promise<string>
Returns html content based on the component's Template definition. Use this method when rendering a component.
<h3>Programmatic Example:</h3>
{await new SnippetComponent(c.Snippet).Render()}

<h3>Declarative Example:</h3>
{await (<SnippetComponent snippet={c.Snippet} />)}


abstract Template: (route?: Route) => Promise<Jsx>
Defines the html output representing a component once rendered.
Template = async () => <p>hello world!</p>


ReRender(route?: Route): Promise<void>
Replaces the component's current rendered html content with a fresh copy. Use this method when you want to manually trigger a re-render.
this.ReRender() // within component