Decaf's Angular Modul Global

# Dynamic() → {function}

Decorator that registers an Angular component with the NgxRenderingEngine for dynamic loading. This decorator must be applied before the @Component decorator to properly extract component metadata. It adds metadata to the component class and registers it with the rendering engine using its selector.

Marks an Angular component as dynamically loadable

sequenceDiagram participant C as Component Class participant D as Dynamic Decorator participant R as NgxRenderingEngine participant M as Angular Metadata C->>D: Apply decorator D->>M: reflectComponentType() M-->>D: Return component metadata alt No metadata found D->>D: Throw InternalError else Metadata found D->>R: registerComponent(selector, constructor) D->>C: Apply metadata end

View Source lib/engine/decorators.ts, line 8

Returns:

A decorator function that can be applied to Angular component classes

Type: function

# 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.

View Source lib/services/NgxMediaService.ts, line 470

Returns:

An observable that emits the current color scheme (dark or light).

Type: 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();

# 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.

View Source lib/services/NgxMediaService.ts, line 581

Returns:

Type: void

# async execute(command)

Executes a shell command asynchronously.

Parameters:

Name	Type	Description
`command`		The shell command to execute.

View Source cli-module.ts, line 88

Returns:

A Promise that resolves with the command's stdout output as a string if successful, or rejects with an error message if the command fails or produces stderr output.

# getNgxInlineModal(inlineContent, propsopt, injectoropt) → {Promise.<void>}

Get modal component instance for show inline content

get modal with inline content instance.

Parameters:

Name	Type	Attributes	Default	Description
`inlineContent`	`string` \| `SafeHtml`			The content to display in the lightbox modal.
`props`	`Partial.<ModalComponent>`	<optional>	{}	Properties to initialize the modal component.
`injector`	`EnvironmentInjector`	<optional>		Optional environment injector for dependency injection.

View Source lib/components/modal/modal.component.ts, line 553

Returns:

A promise that resolves when the modal is presented.

Type: Promise.<void>

# getNgxModalComponent(propsopt, modalPropsopt, injectoropt) → {Promise.<IonModal>}

Creates and initializes a modal component with the provided properties and options.

Retrieves a modal component instance.

Parameters:

Name	Type	Attributes	Default	Description
`props`	`Partial.<ModalComponent>`	<optional>	{}	Properties to initialize the modal component.
`modalProps`	`Partial.<ModalOptions>`	<optional>	{}	Additional modal options.
`injector`	`EnvironmentInjector`	<optional>		Optional environment injector for dependency injection.

View Source lib/components/modal/modal.component.ts, line 484

Returns:

A promise that resolves with the modal instance.

Type: Promise.<IonModal>

# getNgxModalCrudComponent(propsopt, modalPropsopt, injectoropt) → {Promise.<IonModal>}

Creates and initializes a modal component with the provided properties and options.

Retrieves a modal component instance.

Parameters:

Name	Type	Attributes	Default	Description
`props`	`Partial.<ModalComponent>`	<optional>	{}	Properties to initialize the modal component.
`modalProps`	`Partial.<ModalOptions>`	<optional>	{}	Additional modal options.
`injector`	`EnvironmentInjector`	<optional>		Optional environment injector for dependency injection.

View Source lib/components/modal/modal.component.ts, line 500

Returns:

A promise that resolves with the modal instance.

Type: Promise.<IonModal>

# getNgxSelectOptionsModal(options, injectoropt) → {Promise.<IonModal>}

Creates and initializes a modal component for displaying a list of selectable options.

Retrieves a modal for selecting options.

Parameters:

Name	Type	Attributes	Description
`options`	`Array.<SelectOption>`		The list of options to display in the modal.
`injector`	`EnvironmentInjector`	<optional>	Optional environment injector for dependency injection.

View Source lib/components/modal/modal.component.ts, line 570

Returns:

A promise that resolves with the modal instance.

Type: Promise.<IonModal>

# 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.

View Source lib/services/NgxMediaService.ts, line 528

Returns:

An observable that emits true if dark mode is active, otherwise false.

Type: Observable.<boolean>

Example

mediaService.isDarkMode().subscribe(isDark => {
  console.log('Dark mode active:', isDark);
});

# 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.

View Source lib/services/NgxMediaService.ts, line 510

Returns:

Type: void

Example

const targetElement = document.getElementById('svg-container');
mediaService.loadSvgObserver('/assets/icons/icon.svg', targetElement);

# 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.

View Source lib/services/NgxMediaService.ts, line 492

Returns:

An observable that emits true if the scroll position exceeds the offset, otherwise false.

Type: Observable.<boolean>

Example

mediaService.observePageScroll(100).subscribe(isScrolled => {
  console.log('Page scrolled past 100px:', isScrolled);
});

# parseProjectName(value)

Parses and normalizes the project name input.

Parameters:

Name	Type	Description
`value`		The input project name to be parsed. Can be 'app', 'lib', or any other string value.

View Source cli-module.ts, line 106

Returns:

A normalized string representation of the project name. Returns 'for-angular-app' if input is 'app', 'for-angular' if input is 'lib', or the lowercase version of the input for any other value.

# presentNgxInlineModal(inlineContent, propsopt, injectoropt) → {Promise.<void>}

Displays a modal with the specified content and properties.

Presents modal with inline content.

Parameters:

Name	Type	Attributes	Default	Description
`inlineContent`	`string` \| `SafeHtml`			The content to display in the modal.
`props`	`Partial.<ModalComponent>`	<optional>	{}	Properties to initialize the modal component.
`injector`	`EnvironmentInjector`	<optional>		Optional environment injector for dependency injection.

View Source lib/components/modal/modal.component.ts, line 541

Returns:

A promise that resolves when the modal is presented.

Type: Promise.<void>

# presentNgxLightBoxModal(inlineContent, propsopt, injectoropt) → {Promise.<void>}

Displays a modal in lightbox mode with the specified content and properties.

Presents a lightbox modal with inline content.

Parameters:

Name	Type	Attributes	Default	Description
`inlineContent`	`string` \| `SafeHtml`			The content to display in the lightbox modal.
`props`	`Partial.<ModalComponent>`	<optional>	{}	Properties to initialize the modal component.
`injector`	`EnvironmentInjector`	<optional>		Optional environment injector for dependency injection.

View Source lib/components/modal/modal.component.ts, line 529

Returns:

A promise that resolves when the modal is presented.

Type: Promise.<void>

# 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.

View Source lib/services/NgxMediaService.ts, line 543

Returns:

Type: void

Example

const component = document.querySelector('.my-component');
mediaService.setDarkMode(component);

# 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.

View Source lib/services/NgxMediaService.ts, line 558

Returns:

Type: 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);

# validateProject(value)

Validates if the given project value is a valid enum member of Projects.

Parameters:

Name	Type	Description
`value`		The project value to validate.

View Source cli-module.ts, line 126

Returns:

A boolean indicating whether the value is a valid Projects enum member.

# validateType(value)

Validates if the given type value is a valid enum member of Types.

Parameters:

Name	Type	Description
`value`		The type value to validate.

View Source cli-module.ts, line 117

Returns:

A boolean indicating whether the value is a valid Types enum member.

# 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.

View Source lib/services/NgxMediaService.ts, line 453

Returns:

An observable that emits the window dimensions on resize.

Type: Observable.<IWindowResizeEvent>

Example

mediaService.windowResizeObserver().subscribe(dimensions => {
  console.log('Window dimensions:', dimensions);
});

for-angular

Members

# constant decafPageTransition

# constant patternValidators

Methods

# Dynamic() → {function}

# colorSchemeObserver(componentopt) → {Observable.<WindowColorScheme>}

Parameters:

Example

# destroy() → {void}

# async execute(command)

Parameters:

# getNgxInlineModal(inlineContent, propsopt, injectoropt) → {Promise.<void>}

Parameters:

# getNgxModalComponent(propsopt, modalPropsopt, injectoropt) → {Promise.<IonModal>}

Parameters:

# getNgxModalCrudComponent(propsopt, modalPropsopt, injectoropt) → {Promise.<IonModal>}

Parameters:

# getNgxSelectOptionsModal(options, injectoropt) → {Promise.<IonModal>}

Parameters:

# isDarkMode() → {Observable.<boolean>}

Example

# loadSvgObserver(path, target) → {void}

Parameters:

Example

# observePageScroll(offset, awaitDelayopt) → {Observable.<boolean>}

Parameters:

Example

# parseProjectName(value)

Parameters:

# presentNgxInlineModal(inlineContent, propsopt, injectoropt) → {Promise.<void>}

Parameters:

# presentNgxLightBoxModal(inlineContent, propsopt, injectoropt) → {Promise.<void>}

Parameters:

# setDarkMode(component) → {void}

Parameters:

Example

# toggleClass(component, className, addopt) → {void}

Parameters:

Example

# validateProject(value)

Parameters:

# validateType(value)

Parameters:

# windowResizeObserver() → {Observable.<IWindowResizeEvent>}

Example