fyord g c NewComponent
Id
Id: stringA unique id assigned to a component's root div.
Element
get Element(): HTMLElement | nullProperty 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): stringMaps 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