Component

Base class for all fyord components

fyord g c NewComponent

Id

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

Element

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

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 = 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

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

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} />)}
</>

Template

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

ReRender

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.
componentReference.ReRender()
this.ReRender() // within component