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

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.

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:

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

Usage

Example for (*) syntax:

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

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:

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

Example for <ng-template> syntax:

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

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:

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

Example creating a global mask with the tdLoadingService:

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');
  }
}