Dropdown List Data Loading 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-data-loading-template-usage',
  templateUrl: './data-loading-template-usage.component.html'
})
export class DataLoadingTemplateUsageComponent {
  public options: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    setTimeout(() => {
      this.options = 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 data loading 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 Data Loading Template