Dropdown List Load Data On Init

Dropdown load data on init feature can be uses to take over the control of data binding when on component initialization. If this configuration is set to false, data won't be loaded as expected and user must provide their own way of data loading mechanism by explicitly.

What You Will See

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-load-data-on-init-usage',
  templateUrl: './load-data-on-init-usage.component.html'
})
export class LoadDataOnInitUsageComponent {
  public options: ExampleData[];

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData();
  }
}

<ng-dropdown
  [id]="'products_advanced_01'"
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [options]="options"
  [loadDataOnInit]="false">
</ng-dropdown>

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
  
import { DropdownModule } from 'ornamentum';
  
import { LoadOnInitUsageComponent } from './load-data-on-init-usage.component';

@NgModule({
 bootstrap: [LoadDataOnInitUsageComponent],
 declarations: [LoadDataOnInitUsageComponent],
 imports: [
    BrowserModule, 
    DropdownModule.forRoot()
  ]
})
export class LoadDataOnInitUsageModule {
}

Basic Usage

For enable/disable the data load on init configuration, simply bind a specific boolean value into ng-dropdown. the default value for this configuration is true.

  <ng-dropdown
    ...
    [loadDataOnInit]="false">
  </ng-dropdown>

Dropdown List Load Data On Init

What You Will See

Basic Usage

Suggested Links