Loader Component Guide

The @ngx-adv/loader component is a powerful tool for displaying loaders in your Angular application. Follow these steps to integrate and use it:

Table of Contents

• Installation
• Usage
• Features
• LoaderOverlayService
• Contributions

Installation

1. Install the @ngx-adv/loader package using npm:

npm install --save @ngx-adv/loader

2. Import the loader component styles into your Angular application's stylesheet:

@import '@ngx-adv/theme/assets/scss/components/loader';

Usage

3. In your component TypeScript file, import the necessary classes:

import { LoaderComponent } from '@ngx-adv/loader';

@Component({
  selector: 'app-loader-page',
  standalone: true,
  imports: [LoaderComponent],
})
export class LoaderPageComponent {
  constructor() {}
}

4. In your component's HTML template, use the <ngx-adv-loader> component:

<ngx-adv-loader></ngx-adv-loader>

<!-- or -->

<ngx-adv-loader [loadingText]="'Loading'" [showLoadingText]="true" [height]="'150px'"></ngx-adv-loader>

Features

• Easy integration and usage of loaders in Angular applications.
• Customizable loader content and animations.
• Handles dynamic styling based on configuration.

Inputs

The ngx-adv-loader component supports the following inputs:

• loadingText: The text to display while loading. Default is 'Please Wait'.
• showLoadingText: A boolean to show or hide the loading text. Default is true.
• height: The height of the loader. Can be a string with units (e.g., '150px', '100%', '10rem').

Example

Here is an example of using the loader component with different inputs:

<ngx-adv-loader [loadingText]="'Loading your data'" [showLoadingText]="true" [height]="'200px'"></ngx-adv-loader>

LoaderOverlayService

The LoaderOverlayService provides an easy way to display an overlay loader across your application. It allows you to open and close a loader overlay with customizable options.

Service Usage

1. In your component TypeScript file, inject the LoaderOverlayService:

import { LoaderOverlayService } from '@ngx-adv/loader';

@Component({
  selector: 'app-loader-page',
})
export class LoaderPageComponent {
  constructor(private loaderOverlayService: LoaderOverlayService) {}

  showLoader() {
    this.loaderOverlayService.openOverlay(true, 'Loading your data', '150px');
  }

  hideLoader() {
    this.loaderOverlayService.closeOverlay();
  }
}

2. Use the showLoader and hideLoader methods to control the overlay:

<button (click)="showLoader()">Show Loader</button> <button (click)="hideLoader()">Hide Loader</button>

Service Methods

• openOverlay(showLoadingText?: boolean, loadingText?: string, height?: string | number): Opens the overlay with the specified options.

  • showLoadingText (optional): A boolean to show or hide the loading text. Default is true.
  • loadingText (optional): The text to display while loading. Default is 'Please Wait'.
  • height (optional): The height of the loader. Can be a string with units (e.g., '150px', '100%', '10rem').

• closeOverlay(): Closes the overlay.

Contributions

Contributions for the @ngx-adv/loader package are made by Mohamed Elserety. If you have any specific questions or need further assistance with this package, please reach out to your team for support.