SiAutoCollapsableListDirective documentation¶

selectorexported-as

[siAutoCollapsableList]siAutoCollapsableList

Input Properties¶

Name	Type	Default	Description
gap ¶	`number`		The (flex) gap in pixels, will automatically be set if a pixel value is used in CSS.
siAutoCollapsableList ¶	`boolean`	`true`
siAutoCollapsableListContainerElement ¶	(`null` \| `HTMLElement`)	`undefined`	The element which size is available for the content of the siAutoCollapsableList.

Attributes and Methods¶

Name	Type	Default	Description
(readonly) items ¶	`Signal`<readonly `SiAutoCollapsableListItemDirective`[]>	...	The items which are displayed in the siAutoCollapsableList.

Types Documentation¶

() => `{}`¶ Constructor

() => `{}`¶

ElementDimensions

¶

Interface

Properties
height: `number`¶
width: `number`¶

SiAutoCollapsableListItemDirective

extends SiAutoCollapsableListMeasurable implements AfterViewInit¶

Class

▶

Constructor
() => `{}` from `SiAutoCollapsableListMeasurable`¶

Properties
True if enough space is available for this item. canBeVisible: `WritableSignal`<`boolean`> = `false`¶
elementRef: `ElementRef`<`any`> from `elementRef` = ...¶
Hide this item even if enough space is available. When calculating the overall available size, this item is still considered when forceHide=true forceHide: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
True if this item is actually visible to the user isVisible: `Signal`<`boolean`> = ...¶
Emits on element width changes. size$: `Observable`<`number`> from `size$` = `this.resizeObserverService .observe(this.elementRef.nativeElement, 0, true, true) .pipe( map(size => size.width), distinctUntilChanged(), shareReplay(1) )`¶

Methods
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated. ngAfterViewInit: () => `void` from `AfterViewInit.ngAfterViewInit`¶

SiAutoCollapsableListMeasurable

¶

Class

▶

Constructor
() => `{}`¶

Properties
elementRef: `ElementRef`<`any`> = ...¶
resizeObserverService: `ResizeObserverService` = ...¶
Emits on element width changes. size$: `Observable`<`number`> = `this.resizeObserverService .observe(this.elementRef.nativeElement, 0, true, true) .pipe( map(size => size.width), distinctUntilChanged(), shareReplay(1) )`¶

ResizeObserverService

¶

Class

▶

A service wrapping ResizeObserver . This is a service for those reasons: - only one ResizeObserver should be used for performance reason. - For Angular change detection to work, explicit ngZone calls are necessary - Observable stream

Constructor
() => `{}`¶

Properties
listeners: `Map`<`Element`, `Listener`> = ...¶
resizeObserver?: `ResizeObserver`¶
timerQueue: `Map`<`number`, `QueueEntry`[]> = ...¶
zone: `NgZone` = ...¶

Methods

check size on all observed elements. Only use in testing!

Deprecated: Will be removed in major version 50! For testing purposes use the resize observer mock:

beforeEach(() => mockResizeObserver());
afterEach(() => restoreResizeObserver());
it('should trigger resize', () => {
  // For all observed elements
  MockResizeObserver.triggerResize({});
  // For specific HTML element
  MockResizeObserver.triggerResize({ target: myElement });
});

~~_checkAll~~: () => void¶

emitSize

(element: Element, entry: ResizeSubscriber, force: boolean = false) => void¶

Parameters
element: `Element`¶
entry: `ResizeSubscriber`¶
force: `boolean` = `false`¶

handleElement

(element: Element) => void¶

Parameters
element: `Element`¶

handleResizeSubscriber

(element: Element, entry: ResizeSubscriber) => void¶

Parameters
element: `Element`¶
entry: `ResizeSubscriber`¶

observe

(element: Element, throttle: number, emitInitial: boolean, emitImmediate: boolean) => Observable<ElementDimensions>¶

Observe the size of an element. Returns an observable with the changes.

Parameters
The element to observe element: `Element`¶
Throttle time in ms. Will emit this time after the resize throttle: `number`¶
Emit the initial size after subscribe? emitInitial?: `boolean`¶
Emit an event immediately after the size changes. Useful e.g. for visibility checks. emitImmediate?: `boolean`¶

processQueue

(queue: QueueEntry[]) => void¶

Parameters
queue: `QueueEntry`[]¶

schedule

(timeout: number, element: Element, subscriber: ResizeSubscriber, unblock: boolean, force: boolean = false) => void¶

Parameters
timeout: `number`¶
element: `Element`¶
subscriber: `ResizeSubscriber`¶
unblock: `boolean`¶
force: `boolean` = `false`¶

subscriberAdded

(entry: Listener, subscriber: ResizeSubscriber, emitInitial: boolean) => void¶

Parameters
entry: `Listener`¶
subscriber: `ResizeSubscriber`¶
emitInitial?: `boolean`¶

subscriberRemoved

(entry: Listener, subscriber: ResizeSubscriber) => void¶

Parameters
entry: `Listener`¶
subscriber: `ResizeSubscriber`¶

unschedule

(entry: ResizeSubscriber) => void¶

Parameters
entry: `ResizeSubscriber`¶

Except where otherwise noted, content on this site is licensed under MIT License.