# new NgxLoadingComponent()
This class provides a robust interface for managing Ionic loading overlays with additional features like progress tracking, message updates, and error handling. It implements a singleton pattern to ensure only one loading overlay is active at a time.
Enhanced loading overlay management class.
Methods
# async getMessage() → {Promise.<string>}
Returns the message currently being displayed in the loading overlay. This method provides access to the current message state for external components that may need to know what message is currently being shown to the user.
Retrieves the current loading message.
Promise resolving to the current loading message
Promise.<string>
Example
```typescript
const loading = getNgxLoadingComponent();
await loading.show('Processing...');
const currentMessage = await loading.getMessage();
console.log('Current loading message:', currentMessage); // "Processing..."
// Useful for debugging or state management
if (await loading.getMessage() === 'Processing...') {
await loading.update('Almost done...', 90);
}
```# async getOptions(optionsopt, messageopt) → {LoadingOptions}
Combines the default loading options with user-provided options, ensuring that custom configurations override defaults while maintaining consistent behavior. The message parameter takes precedence over options.message.
Merges custom options with default loading configuration.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
options |
LoadingOptions
|
<optional> |
{} | Custom loading options to merge |
message |
string
|
<optional> |
Optional message to override options.message |
The merged configuration object
LoadingOptions
Example
```typescript
// Internal usage - automatically called by show() method
const config = await loading.getOptions({
duration: 3000,
spinner: 'bubbles'
}, 'Custom message');
// Result: default options + custom options + message override
```# isVisible() → {boolean}
Determines whether a loading overlay is currently active and displayed to the user. This method is useful for preventing multiple loading overlays and for conditional logic based on loading state.
Checks if a loading overlay is currently visible.
True if loading overlay is visible, false otherwise
boolean
Example
```typescript
const loading = getNgxLoadingComponent();
if (!loading.isVisible()) {
await loading.show('Loading data...');
}
// Conditional operations based on loading state
if (loading.isVisible()) {
await loading.update('Processing...', 50);
}
```# async remove() → {Promise.<void>}
Dismisses the currently active loading overlay and resets internal state. Includes error handling for cases where no loading overlay is present. Automatically resets progress tracking and clears the loading instance reference.
Removes the loading overlay from display.
Promise that resolves when the loading overlay is removed
Promise.<void>
Example
```typescript
const loading = getNgxLoadingComponent();
await loading.show('Loading...');
// Perform some async operation
await performDataOperation();
// Remove loading overlay
await loading.remove();
// Safe to call even if no loading is present
await loading.remove(); // Logs warning but doesn't throw error
```# async show(message, optionsopt) → {Promise.<void>}
Creates and presents a loading overlay to the user with customizable message and configuration options. If a loading overlay is already visible, it updates the existing overlay instead of creating a new one to prevent conflicts.
Displays a loading overlay with specified message and options.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
message |
string
|
The message to display in the loading overlay |
|
options |
LoadingOptions
|
<optional> |
Optional configuration for the loading overlay |
Promise that resolves when the loading overlay is displayed
Promise.<void>
Example
```typescript
const loading = getNgxLoadingComponent();
// Simple loading with message
await loading.show('Loading...');
// Loading with custom options
await loading.show('Processing data...', {
duration: 5000,
spinner: 'bubbles',
cssClass: 'custom-loading'
});
// Loading with backdrop dismiss
await loading.show('Please wait...', {
backdropDismiss: true
});
```# async update(message, isProgressUpdateopt) → {Promise.<void>}
Modifies the current loading overlay's message and can display progress information. If no loading overlay exists, creates a new one with a default duration. Supports both simple message updates and progress tracking with percentage display.
Updates the loading overlay message and optionally tracks progress.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
message |
string
|
The new message to display |
||
isProgressUpdate |
boolean
|
number
|
<optional> |
false | Progress update mode or percentage value |
Promise that resolves when the update is complete
Promise.<void>
Example
```typescript
const loading = getNgxLoadingComponent();
await loading.show('Starting process...');
// Simple message update
await loading.update('Processing data...');
// Progress update with percentage
await loading.update('Loading files...', 25);
await loading.update('Processing files...', 50);
await loading.update('Finalizing...', 90);
// Progress update with boolean flag
await loading.update('75', true); // Shows "Original Message (75%)"
```# static exports.getNgxLoadingComponent() → {NgxLoadingComponent}
Implements the singleton pattern by creating a single global instance of NgxLoadingComponent on first call and returning the same instance on subsequent calls. This ensures consistent loading overlay behavior throughout the application.
Factory function for obtaining the singleton NgxLoadingComponent instance.
The singleton NgxLoadingComponent instance
Example
```typescript
// Get the singleton instance
const loading = getNgxLoadingComponent();
// All calls return the same instance
const loading1 = getNgxLoadingComponent();
const loading2 = getNgxLoadingComponent();
console.log(loading1 === loading2); // true
// Use throughout the application
await loading.show('Loading...');
// ... later in another component ...
await getNgxLoadingComponent().update('Still loading...', 50);
```