SiResponsiveContainerDirective documentation¶

selectorexported-as

[siResponsiveContainer]siResponsiveContainer

Directive to automatically set si-container-* classes so Bootstrap column classes work in the context of the container instead of viewport size.

Input Properties¶

Name	Type	Default	Description
breakpoints ¶	`Breakpoints`
resizeThrottle ¶	`number`	`100`

Attributes and Methods¶

Name	Type	Default	Description
(readonly) lg ¶	`WritableSignal`<`boolean`>	`false`
(readonly) md ¶	`WritableSignal`<`boolean`>	`false`
(readonly) sm ¶	`WritableSignal`<`boolean`>	`false`
(readonly) xl ¶	`WritableSignal`<`boolean`>	`false`
(readonly) xs ¶	`WritableSignal`<`boolean`>	`false`
(readonly) xxl ¶	`WritableSignal`<`boolean`>	`false`
isLg ¶	`boolean`	`false`	Deprecated: Use lg instead.
isMd ¶	`boolean`	`false`	Deprecated: Use md instead.
isSm ¶	`boolean`	`false`	Deprecated: Use sm instead.
isXl ¶	`boolean`	`false`	Deprecated: Use xl instead.
isXs ¶	`boolean`	`false`	Deprecated: Use xs instead.
isXxl ¶	`boolean`	`false`	Deprecated: Use xxl instead.

Types Documentation¶

Breakpoints

¶

Interface

Properties
lgMinimum: `number`¶
mdMinimum: `number`¶
smMinimum: `number`¶
xlMinimum: `number`¶
xxlMinimum: `number`¶

ElementDimensions

¶

Interface

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

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.