attributesData<
T>(...directives):object
Returns an object with the attributes, style and class keys containing information derived from a list of directives.
attributes value is a JSON representation of key/value attributes, excepted for the class and style attributes classNames value is an array of string representing the classes to be applied style value is a JSON representation of the styles to be applied • T extends any[]
• ...directives: DirectivesAndOptParam<T, SSRHTMLElement>
List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
object
JSON object with the attributes, class and style keys.
attributes:
Record<string,string>
classNames:
string[]
style:
Partial<Record<StyleKey,StyleValue>>
Properties for configuring server-side rendering directives.
optionalattributes:Record<string,AttributeValue|ReadableSignal<AttributeValue>>
Attributes to be added to the provided node.
The style attribute must be added separately.
optionalclassNames:Record<string,boolean|ReadableSignal<boolean>>
Class names to be added to an HTML element.
Key-value pairs where keys are class names and values indicate whether the class should be added (true) or removed (false).
optionalevents:Partial<object>
Events to be attached to an HTML element.
abort:
object| (this,event) =>void
animationcancel:
object| (this,event) =>void
animationend:
object| (this,event) =>void
animationiteration:
object| (this,event) =>void
animationstart:
object| (this,event) =>void
auxclick:
object| (this,event) =>void
beforeinput:
object| (this,event) =>void
beforetoggle:
object| (this,event) =>void
blur:
object| (this,event) =>void
cancel:
object| (this,event) =>void
canplay:
object| (this,event) =>void
canplaythrough:
object| (this,event) =>void
change:
object| (this,event) =>void
click:
object| (this,event) =>void
close:
object| (this,event) =>void
compositionend:
object| (this,event) =>void
compositionstart:
object| (this,event) =>void
compositionupdate:
object| (this,event) =>void
contextmenu:
object| (this,event) =>void
copy:
object| (this,event) =>void
cuechange:
object| (this,event) =>void
cut:
object| (this,event) =>void
dblclick:
object| (this,event) =>void
drag:
object| (this,event) =>void
dragend:
object| (this,event) =>void
dragenter:
object| (this,event) =>void
dragleave:
object| (this,event) =>void
dragover:
object| (this,event) =>void
dragstart:
object| (this,event) =>void
drop:
object| (this,event) =>void
durationchange:
object| (this,event) =>void
emptied:
object| (this,event) =>void
ended:
object| (this,event) =>void
error:
object| (this,event) =>void
focus:
object| (this,event) =>void
focusin:
object| (this,event) =>void
focusout:
object| (this,event) =>void
formdata:
object| (this,event) =>void
fullscreenchange:
object| (this,event) =>void
fullscreenerror:
object| (this,event) =>void
gotpointercapture:
object| (this,event) =>void
input:
object| (this,event) =>void
invalid:
object| (this,event) =>void
keydown:
object| (this,event) =>void
keypress:
object| (this,event) =>void
keyup:
object| (this,event) =>void
load:
object| (this,event) =>void
loadeddata:
object| (this,event) =>void
loadedmetadata:
object| (this,event) =>void
loadstart:
object| (this,event) =>void
lostpointercapture:
object| (this,event) =>void
mousedown:
object| (this,event) =>void
mouseenter:
object| (this,event) =>void
mouseleave:
object| (this,event) =>void
mousemove:
object| (this,event) =>void
mouseout:
object| (this,event) =>void
mouseover:
object| (this,event) =>void
mouseup:
object| (this,event) =>void
paste:
object| (this,event) =>void
pause:
object| (this,event) =>void
play:
object| (this,event) =>void
playing:
object| (this,event) =>void
pointercancel:
object| (this,event) =>void
pointerdown:
object| (this,event) =>void
pointerenter:
object| (this,event) =>void
pointerleave:
object| (this,event) =>void
pointermove:
object| (this,event) =>void
pointerout:
object| (this,event) =>void
pointerover:
object| (this,event) =>void
pointerup:
object| (this,event) =>void
progress:
object| (this,event) =>void
ratechange:
object| (this,event) =>void
reset:
object| (this,event) =>void
resize:
object| (this,event) =>void
scroll:
object| (this,event) =>void
scrollend:
object| (this,event) =>void
securitypolicyviolation:
object| (this,event) =>void
seeked:
object| (this,event) =>void
seeking:
object| (this,event) =>void
select:
object| (this,event) =>void
selectionchange:
object| (this,event) =>void
selectstart:
object| (this,event) =>void
slotchange:
object| (this,event) =>void
stalled:
object| (this,event) =>void
submit:
object| (this,event) =>void
suspend:
object| (this,event) =>void
timeupdate:
object| (this,event) =>void
toggle:
object| (this,event) =>void
touchcancel:
object| (this,event) =>void
touchend:
object| (this,event) =>void
touchmove:
object| (this,event) =>void
touchstart:
object| (this,event) =>void
transitioncancel:
object| (this,event) =>void
transitionend:
object| (this,event) =>void
transitionrun:
object| (this,event) =>void
transitionstart:
object| (this,event) =>void
volumechange:
object| (this,event) =>void
waiting:
object| (this,event) =>void
webkitanimationend:
object| (this,event) =>void
webkitanimationiteration:
object| (this,event) =>void
webkitanimationstart:
object| (this,event) =>void
webkittransitionend:
object| (this,event) =>void
wheel:
object| (this,event) =>void
Key-value pairs where keys are event types and values are event handlers.
optionalstyles:Partial<Record<StyleKey,StyleValue|ReadableSignal<StyleValue>>>
Styles to be added to an HTML element.
Key-value pairs where keys are CSS style properties and values are style values.
bindDirective<
T,U>(directive,directiveArg$):Directive<void,U>
Binds the given directive to a store that provides its argument.
• T
• U extends SSRHTMLElement = SSRHTMLElement
• directive: Directive<T, U>
directive to bind
• directiveArg$: ReadableSignal<T>
store containing the argument of the directive
Directive<void, U>
The bound directive that can be used with no argument.
The returned directive can be used without argument, it will ignore any argument passed to it and will call the provided directive with the content of the provided store as its argument, calling its update method when the content of the store changes.
bindDirectiveNoArg<
T,U>(directive):Directive<void,U>
Returns a directive that ignores any argument passed to it and calls the provided directive without any argument.
• T
• U extends SSRHTMLElement = SSRHTMLElement
• directive: Directive<void | T, U>
directive to wrap
Directive<void, U>
The resulting directive.
browserDirective<
T,U>(directive):Directive<T,SSRHTMLElement>
Creates a directive that wraps the provided directive to only run it in a browser environment (and not in a server-side rendering environment).
• T
• U extends HTMLElement
• directive: Directive<T, U>
The directive to run only in a browser.
The wrapped directive.
classDirective(
node,args):void|object
Directive that takes as an argument a string containing CSS classes to be put on the HTML element.
• node: SSRHTMLElement
• args: string
void | object
createAttributesDirective<
T>(propsFn):Directive<T>
Creates a directive for server-side rendering with bindable elements. This directive binds events, attributes, styles, and classNames to an HTML element.
• T = void
• propsFn
A function that returns the AttributesDirectiveProps with the data to bind. This function can take an optional parameter that corrspond to the second parameter of the created directive.
Directive<T>
A directive object with bound events, attributes, styles, and classNames.
createBrowserStoreArrayDirective():
object
Returns a directive and a store. The store contains at any time the array of all the DOM elements on which the directive is currently used.
object
An object with two properties: the directive property that is the directive to use on some DOM elements,
and the elements$ property that is the store containing an array of all the elements on which the directive is currently
used.
directive:
Directive<void,SSRHTMLElement>
elements$:
ReadableSignal<HTMLElement[]>
It is the same as createStoreArrayDirective, but the returned directive is only executed in a browser environment and the type of the elements is HTMLElement instead of SSRHTMLElement.
If the directive is intended to be used on a single element element, it may be more appropriate to use createBrowserStoreDirective instead.
createBrowserStoreDirective():
object
Returns a directive and a store. When the directive is used on a DOM element, the store contains that DOM element. When the directive is not used, the store contains null.
object
An object with two properties: the directive property that is the directive to use on one DOM element,
and the element$ property that is the store containing the element on which the directive is currently used (or null
if the store is not currently used).
directive:
Directive<void,SSRHTMLElement>
element$:
ReadableSignal<null|HTMLElement>
It is the same as createStoreDirective, but the returned directive is only executed in a browser environment and the type of the element is HTMLElement instead of SSRHTMLElement.
If the directive is used on more than one element, an error is displayed in the console and the element is ignored. If the directive is intended to be used on more than one element, please use createStoreArrayDirective instead.
createStoreArrayDirective():
object
Returns a directive and a store. The store contains at any time the array of all the DOM elements on which the directive is currently used.
object
An object with two properties: the directive property that is the directive to use on some DOM elements,
and the elements$ property that is the store containing an array of all the elements on which the directive is currently
used.
directive:
Directive
elements$:
ReadableSignal<SSRHTMLElement[]>
It is the same as createBrowserStoreArrayDirective, but the returned directive is also executed in a server environment and the type of the elements is SSRHTMLElement instead of HTMLElement.
If the directive is intended to be used on a single element element, it may be more appropriate to use createStoreDirective instead.
createStoreDirective():
object
Returns a directive and a store. When the directive is used on a DOM element, the store contains that DOM element. When the directive is not used, the store contains null.
object
An object with two properties: the directive property that is the directive to use on one DOM element,
and the element$ property that is the store containing the element on which the directive is currently used (or null
if the store is not currently used).
directive:
Directive
element$:
ReadableSignal<null|SSRHTMLElement>
It is the same as createBrowserStoreDirective, but the returned directive is also executed in a server environment and the type of the element is SSRHTMLElement instead of HTMLElement.
If the directive is used on more than one element, an error is displayed in the console and the element is ignored. If the directive is intended to be used on more than one element, please use createStoreArrayDirective instead.
directiveAttributes<
T>(...directives):Record<string,string>
Returns JSON representation of the attributes to be applied derived from a list of directives.
• T extends any[]
• ...directives: DirectivesAndOptParam<T, SSRHTMLElement>
List of directives to generate attributes from. Each parameter can be the directive or an array with the directive and its parameter
Record<string, string>
JSON object with name/value for the attributes
directiveSubscribe(
store,asyncUnsubscribe):Directive
Returns a directive that subscribes to the given store while it is used on a DOM element, and that unsubscribes from it when it is no longer used.
• store: ReadableSignal<any>
store on which there will be an active subscription while the returned directive is used.
• asyncUnsubscribe: boolean = true
true if unsubscribing from the store should be done asynchronously (which is the default), and false if it should be done synchronously when the directive is destroyed
The resulting directive.
directiveUpdate<
T>(update):Directive<T>
Returns a directive that calls the provided function with the arguments passed to the directive on initialization and each time they are updated.
• T
• update
Function called with the directive argument when the directive is initialized and when its argument is updated.
Directive<T>
The resulting directive.
isBrowserHTMLElement(
element):element is HTMLElement
On a browser environment, returns true if the given element is an HTMLElement. On a server environment, always returns false.
• element: SSRHTMLElement
The element to check.
element is HTMLElement
true in a browser environment if the given element is an HTMLElement, otherwise false.
mapDirectiveArg<
T,U,V>(directive,fn):Directive<T,V>
Maps the argument to another argument of a directive using a provided function.
• T
• U
• V extends SSRHTMLElement = SSRHTMLElement
• directive: Directive<U, V>
The directive to be applied.
• fn
The function to map the argument.
Directive<T, V>
A new directive that applies the mapping function to the argument.
mergeDirectives<
T,U>(...args):Directive<T,U>
Merges multiple directives into a single directive that executes all of them when called.
• T
• U extends SSRHTMLElement = SSRHTMLElement
• ...args: (Directive<T, U> | Directive<void, U>)[]
directives to merge into a single directive.
Directive<T, U>
The resulting merged directive.
All directives receive the same argument upon initialization and update. Directives are created and updated in the same order as they appear in the arguments list, they are destroyed in the reverse order. All calls to the directives (to create, update and destroy them) are wrapped in a call to the batch function of tansu
multiDirective<
T,U>(element,directives):object
Directive that applies all the directives passed as arguments.
• T extends any[]
• U extends SSRHTMLElement = SSRHTMLElement
• element: U
the element to apply the directives to
• directives: DirectivesAndOptParam<T, U>
the directives to apply
object
The directive instance.
destroy: () =>
void
void
update: (
directives) =>void
• directives: (Directive<void, U> | DirectiveAndParam<any, U>)[]
void
registrationArray<
T>():ReadableSignal<T[]> &object
Utility to create a store that contains an array of items.
• T
ReadableSignal<T[]> & object
a store containing an array of items.
ssrAttributes<
T>(...directives):object
Same as directiveAttributes, but returns an empty object when run in a browser environement.
• T extends any[]
• ...directives: any
object
JSON object with name/value for the attributes
• T
new UseDirective<
T>():UseDirective<T>
UseDirective<T>
use:
undefined|Directive|DirectiveAndParam<T>
ngOnChanges():
void
void
OnChanges.ngOnChanges
useDirectiveForHost<
T>(directive?,params?):object
Set up an agnos-ui directive as an angular host directive.
• T
• directive?: Directive<T>
the directive
• params?: T
the params to pass to the directive
object
the update function to change the directive or params
update: (
newDirective?,newParams?) =>void
• newDirective?: Directive<T>
• newParams?: T
void
• T extends any[]
new UseMultiDirective<
T>():UseMultiDirective<T>
useMulti:
DirectivesAndOptParam<T,SSRHTMLElement>
ngOnChanges():
void
void
OnChanges.ngOnChanges