Loading Spinner Template

This feature enables users to customize native template of Data loading spinner by providing their own template when data loading is in progress. for it's basic usages and example please refer Basic Usage section.

What You Will See

Select
import { Component } from '@angular/core';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-loading-spinner-template-usage',
  templateUrl: './loading-spinner-template-usage.component.html'
})
export class LoadingSpinnerTemplateUsageComponent {
  public items: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    setTimeout(() => {
      this.items = this.dataFetchService.fetchStaticData();
    }, 5000);
  }
}

Basic Usage

As same as the all other templates, we can bind a specific property #ngDropdownLoadingSpinner into ng-template to indicates customize data loading spinner is need to be applied.

The following code block example shows the way of dropdown loading spinner template usages. In here we used simple text to override the native loading functionality. You can provide your own custom templates with any custom styles as you want.

  <ng-template #ngDropdownLoadingSpinner let-option="option">
      <h4 style="font-size:150%; color: #9eff93">Loading...</h4>
  </ng-template>
Events
Server-side Basic Data Binding
Client-side Stream Data Binding
API Doc for Dropdown Loading Spinner Template