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

## **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](#installation)
- [Usage](#usage)
- [Features](#features)
- [LoaderOverlayService](#loaderoverlayservice)
- [Contributions](#contributions)

## **Installation**

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

```bash
npm install --save @ngx-adv/loader
```

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

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

## **Usage**

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

```typescript
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:

```html
<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:

```html
<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`:

```typescript
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:

```html
<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](https://www.linkedin.com/in/elserety/). If you have any specific questions or need further assistance with this package, please reach out to your team for support.

---