Provides utilities for managing media-related features such as color scheme detection, window resize observation, and SVG injection.
Classes
- NgxMediaService
The
NgxMediaServiceprovides utilities for observing and managing media-related features such as color scheme detection, window resize events, and dynamic SVG injection. It leverages Angular's dependency injection system and RxJS for reactive programming.
Methods
# inner colorSchemeObserver(componentopt) → {Observable.<WindowColorScheme>}
This method observes changes in the system's color scheme preference (light or dark)
and the presence of the DARK_PALETTE_CLASS on the document's root element.
Optionally, it can toggle the dark mode class on a specific component.
Observes the color scheme of the application.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
component |
ElementRef
|
HTMLElement
|
<optional> |
Optional component to toggle the dark mode class on. |
An observable that emits the current color scheme (dark or light).
Observable.<WindowColorScheme>
Example
// Observe the color scheme globally
mediaService.colorSchemeObserver().subscribe(scheme => {
console.log('Current color scheme:', scheme);
});
// Observe and toggle dark mode on a specific component
const component = document.querySelector('.my-component');
mediaService.colorSchemeObserver(component).subscribe();# inner destroy() → {void}
Triggers completion of the internal destroy$ subject so that any
Observables created with takeUntil(this.destroy$) will complete and
resources are released.
Clean up internal subscriptions and observers used by the service.
void
# inner isDarkMode() → {Observable.<boolean>}
Observes the colorScheme$ observable and checks if the DARK_PALETTE_CLASS is present
on the document's root element or if the emitted color scheme is dark.
Determines if the current theme is dark mode.
An observable that emits true if dark mode is active, otherwise false.
Observable.<boolean>
Example
mediaService.isDarkMode().subscribe(isDark => {
console.log('Dark mode active:', isDark);
});# inner loadSvgObserver(path, target) → {void}
This method fetches an SVG file from the specified path and injects its content into the provided target element. The operation is performed outside Angular's zone to improve performance, and the DOM update is brought back into the Angular zone to ensure change detection.
Loads an SVG file and injects it into a target element.
Parameters:
| Name | Type | Description |
|---|---|---|
path |
string
|
The path to the SVG file. |
target |
HTMLElement
|
The target element to inject the SVG content into. |
void
Example
const targetElement = document.getElementById('svg-container');
mediaService.loadSvgObserver('/assets/icons/icon.svg', targetElement);# inner observePageScroll(offset, awaitDelayopt) → {Observable.<boolean>}
This method observes the scroll position of the active page's content and emits a boolean indicating whether the scroll position exceeds the specified offset. It waits for a delay before starting the observation to allow page transitions to complete.
Observes the scroll state of the active page.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
offset |
number
|
The scroll offset to compare against. |
||
awaitDelay |
number
|
<optional> |
500 | The delay in milliseconds before starting the observation. |
An observable that emits true if the scroll position exceeds the offset, otherwise false.
Observable.<boolean>
Example
mediaService.observePageScroll(100).subscribe(isScrolled => {
console.log('Page scrolled past 100px:', isScrolled);
});# inner setDarkMode(component) → {void}
Subscribes to the colorScheme$ observable and adds or removes the DARK_PALETTE_CLASS
on the provided component based on the emitted color scheme.
Toggles dark mode for a specific component.
Parameters:
| Name | Type | Description |
|---|---|---|
component |
ElementRef
|
HTMLElement
|
The target component to toggle dark mode on. |
void
Example
const component = document.querySelector('.my-component');
mediaService.setDarkMode(component);# inner toggleClass(component, className, addopt) → {void}
Accepts an ElementRef, HTMLElement, or array of mixed elements and will add
or remove the provided className depending on the add flag. Operates
defensively: resolves ElementRef.nativeElement when needed and ignores
falsy entries.
Add or remove a CSS class on one or multiple elements.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
component |
ElementRef
|
HTMLElement
|
Array.<unknown>
|
Single element, ElementRef, or array of elements to update. |
||
className |
string
|
CSS class name to add or remove. |
||
add |
boolean
|
<optional> |
true | Whether to add (true) or remove (false) the class. |
void
Example
// Add a class to a single element
mediaService.toggleClass(element, 'active', true);
// Remove a class from multiple elements
mediaService.toggleClass([element1, element2], 'hidden', false);# inner windowResizeObserver() → {Observable.<IWindowResizeEvent>}
This method listens for window resize events and emits the new dimensions
(width and height) through the resize$ observable. The resize events are
processed outside Angular's zone to improve performance, and updates are
brought back into the Angular zone to ensure change detection.
Observes window resize events and emits the updated dimensions.
An observable that emits the window dimensions on resize.
Observable.<IWindowResizeEvent>
Example
mediaService.windowResizeObserver().subscribe(dimensions => {
console.log('Window dimensions:', dimensions);
});