# tdLoading

Simply add the `tdLoading` attribute with a [name] value to the element you want to mask.

Dont forget to add the asterisk syntax before the `tdLoading` directive if its not used in a `<ng-template>` element. More ingo on the asterisk (\*) syntax [here](https://angular.dev/guide/directives/structural-directives)

## API Summary

#### Inputs

- tdLoading: string
  - Name reference of the loading mask, used to register/resolve requests to the mask.
- tdLoadingType?: LoadingType or ["linear" | "circular"]
  - Sets the type of loading mask depending on value.
  - Defaults to [LoadingType.Circular | "circular"]
- tdLoadingMode?: LoadingMode or ["determinate" | "indeterminate"]
  - Sets the mode of loading mask depending on value.
  - Defaults to [LoadingMode.Indeterminate | "indeterminate"].
- tdLoadingStrategy?: LoadingStrategy or ["replace" | "overlay"]
  - Sets the strategy of loading mask depending on value.
  - Defaults to [LoadingMode.Replace | "replace"]
- tdLoadingColor?: "primary" | "accent" | "warn"
  - Sets the theme color of the loading component.
  - Defaults to "primary"
- tdLoadingUntil?: any
  - If its null, undefined or false it will be used to register requests to the mask.
  - Else if its any value that can be resolved as true, it will resolve the mask.
  - [name] is optional when using [until], but can still be used to register/resolve it manually.

# tdLoadingService

This service is designed to be a factory of loading masks and serves as a facade for their usage.

Simply add this service as a provider to be able to use it in a component.

TdLoadingService.create() method receives as parameter an object that implements the [ITdLoadingConfig] interface.

```typescript
interface ITdLoadingConfig {
  name: string;
  type?: LoadingType;
  mode?: LoadingMode;
  color?: 'primary' | 'accent' | 'warn';
}
```

## API Summary

#### Methods

- register: function(name?: string, registers: number = 1)
  - Registers a request for the loading mask referenced by the name parameter.
  - Can optionally pass registers argument to set a number of register calls.
  - If no paramemeters are used, then default main mask will be used
- resolve: function(name?: string, resolves: number = 1)
  - Resolves a request for the loading mask referenced by the name parameter.
  - Can optionally pass resolves argument to set a number of resolve calls.
  - If no paramemeters are used, then default main mask will be used.
- resolveAll: function(name?: string)
  - Resolves all requests for the loading mask referenced by the name parameter.
  - If no paramemeters are used, then default main mask will be used.
- setValue: function(name: string, value: number)
  - Set value on a loading mask referenced by the name parameter.
  - Usage only available if its mode is 'determinate'.
- create: function(options: ITdLoadingConfig
  - Creates a fullscreen loading mask and attaches it to the DOM with the given configuration.
  - Only displayed when the mask has a request registered on it.

## Setup

Import the [CovalentLoadingModule] in your NgModule:

```typescript
import { CovalentLoadingModule } from '@covalent/core/loading';
@NgModule({
  imports: [
    CovalentLoadingModule,
    ...
  ],
  ...
})
export class MyModule {}
```

## Usage

Example for (\*) syntax:

```html
<div *tdLoading="'stringName'; type:'circular'; mode:'indeterminate'; strategy:'replace'; color:'primary'">...</div>
```

```typescript
import { TdLoadingService } from '@covalent/core/loading';
...
})
export class Demo {
  constructor(private _loadingService: TdLoadingService) {
    ...
  }

  registerLoading(): void {
    this._loadingService.register('stringName');
  }

  resolveLoading(): void {
    this._loadingService.resolve('stringName');
  }
}
```

Exmaple for (\*) until async syntax:

```html
<div *tdLoading="let item until observable | async; type:'circular'; color:'primary'">{{item}}</div>
```

Example for `<ng-template>` syntax:

```html
<ng-template tdLoading="stringName" tdLoadingType="circular" tdLoadingMode="indeterminate" tdLoadingStrategy="replace" tdLoadingColor="primary"> ... </ng-template>
```

```typescript
import { TdLoadingService } from '@covalent/core/loading';
...
})
export class Demo {
  constructor(private _loadingService: TdLoadingService) {
    ...
  }

  registerLoading(): void {
    this._loadingService.register('stringName');
  }

  resolveLoading(): void {
    this._loadingService.resolve('stringName');
  }
}
```

Example for `<ng-template>` until syntax:

```html
<ng-template tdLoading [tdLoadingUntil]="boolean"> ... </ng-template>
```

Example creating a global mask with the `tdLoadingService`:

```typescript
import { TdLoadingService, LoadingType, LoadingMode } from '@covalent/core/loading';
...
export class Demo {
  constructor(private _loadingService: TdLoadingService) {
    this._loadingService.create({
      name: 'stringName',
      type: LoadingType.Circular,
      mode: LoadingMode.Indeterminate,
      color: 'accent',
    });
  }

  registerLoading(): void {
    this._loadingService.register('stringName');
  }

  resolveLoading(): void {
    this._loadingService.resolve('stringName'); // or this._loadingService.resolveAll('stringName');
  }
}
```