component()
Call Signature
component(
builder,options?):Control
Defined in: js-api/src/u2core/component.ts:1023
Builds a control — the function component: builder runs now with the new control's scope ambient and gets
it as self, so what it builds is owned by the result; after an await it gets back in with
self.task(async (t) => … t.build(…)). It answers the content (an element, a control, a text, or several, which
go into a div), or a handle {root, ...api}: the result is then Control & api, the api's properties copied
onto it as they are (getters stay live). A handle key that is a Control member is a type error, and reported
(reserved-key) and skipped at run time. name is the automation id (data-u2-name). A built control is a
root: built with no owner, it is not reported.
Parameters
| Parameter | Type |
|---|---|
builder | (self) => BuiltRoot |
options? | ControlBuildOptions |
Returns
Example
const counter = DG.U2.component((self) => {
const count = DG.U2.signal(0);
const text = ui.divText('0');
self.effect(() => text.textContent = String(count.value));
return {root: text, increment: () => count.value++};
}, {name: 'counter'});
See
https://public.datagrok.ai/js/samples/ui/widgets/u2-build
Call Signature
component<
R>(builder,options?):never
Defined in: js-api/src/u2core/component.ts:1024
Builds a control — the function component: builder runs now with the new control's scope ambient and gets
it as self, so what it builds is owned by the result; after an await it gets back in with
self.task(async (t) => … t.build(…)). It answers the content (an element, a control, a text, or several, which
go into a div), or a handle {root, ...api}: the result is then Control & api, the api's properties copied
onto it as they are (getters stay live). A handle key that is a Control member is a type error, and reported
(reserved-key) and skipped at run time. name is the automation id (data-u2-name). A built control is a
root: built with no owner, it is not reported.
Type Parameters
| Type Parameter |
|---|
R extends BuiltHandle |
Parameters
| Parameter | Type |
|---|---|
builder | (self) => R |
options? | ControlBuildOptions |
Returns
never
Example
const counter = DG.U2.component((self) => {
const count = DG.U2.signal(0);
const text = ui.divText('0');
self.effect(() => text.textContent = String(count.value));
return {root: text, increment: () => count.value++};
}, {name: 'counter'});