Dropdown List Events

There are set of events have introduced for the dropdown to serve & fulfill different user requirements to manage events that perform on top of data table. all the events are triggers based on pre-defined events hierarchy.

Events Hierarchy

All available dropdown events are initialize to the following sequence depends on it's invoking behaviour (Automatic / User Triggers). 

    |__ Ornamentum Events
       |
       |___ Dropdown Events
       |     |
       |     |___ Automatically Triggers
       |     |     |
       |     |     |-- Init // triggers dropdown initialization.
       |     |     |-- Data Bound // triggers after the data binding completion.
       |     |     |-- Select Change // triggers dropdown option select change.
       |     |
       |     |___ Manually Triggers
       |           |
       |           |-- Trigger Select Change On Init // triggers select change event on dropdown init.
       |           |-- Trigger Select Change On First Option Select // triggers select change when dropdown first option is selected.
       |           |-- Trigger Select Change On Model Update // triggers select change on model update.
       |
       |___ Data Table Events
       |
      \/

Basic Usage

As mention in the Events Hierarchy, all available events can be bind to the dropdown as follows try by yourself to get familiar. for individual event usages refer Useful Events section.

Cooking Gear

Data bound event is called
{"availability":true,"availableStores":[{"storeName":"Barneys New York","website":"https://www.barneys.com/"},{"storeName":"J. C. Penney","website":"https://jcp.com/"},{"storeName":"Von Maur","website":"http://www.vonmaur.com/"}],"retailerCountry":"United States","orderMethodType":"Fax","retailerType":"Outdoors Shop","productLine":"Camping Equipment","productType":"Cooking Gear","product":"TrailChef Deluxe Cook Set","year":2012,"quarter":"Q1 2012","revenue":59628.66,"quantity":489,"grossMargin":0.34754797,"id":10}
Dropdown init event is called

import { AfterViewInit, ChangeDetectorRef, Component } from '@angular/core';

import { DropdownComponent } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-events-usage',
  templateUrl: './events-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class EventsUsageComponent implements AfterViewInit {
  public options: ExampleData[];
  public allEventsData: string[] = [];

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

  public ngAfterViewInit(): void {
    this.cdRef.detectChanges();
  }

  public onDataBound(): void {
    this.allEventsData.push('Data bound event is called');
  }

  public onDropdownInit(dropdown: DropdownComponent): void {
    this.allEventsData.push('Dropdown init event is called');
  }

  public onSelectChange(selectedData: ExampleData | ExampleData[]): void {
    // if selectTrackBy property is specified, the selected option id or ids will be passed as a parameter to this method.
    this.allEventsData.push(JSON.stringify(selectedData));
  }

  public getAllEventsData(): string[] {
    return this.allEventsData.slice().reverse();
  }
}

Useful Events

Init

init: EventEmitter<DropdownComponent>

Event that responsible to trigger dropdown component initialization life cycle hook. in dropdown this will be the first event invoked before all other events.

Select

Dropdown init event is called

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

import { DropdownComponent } from 'ornamentum';

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-init-usage',
  templateUrl: './init-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class InitUsageComponent {
  public options: ExampleData[];
  public initEventData: string = null;

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

  public onDropdownInit(dropdown: DropdownComponent): void {
    this.initEventData = 'Dropdown init event is called';
  }
}

Data Bound

dataBound: EventEmitter<void>

Data bound property will triggers right after completion of data binding to the dropdown.

Select

Data bound event is called

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-data-bound-usage',
  templateUrl: './data-bound-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class DataBoundUsageComponent {
  public options: ExampleData[];
  public dataBoundEventData: string = null;

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

  public onDataBound(): void {
    this.dataBoundEventData = 'Data bound event is called';
  }
}

Select Change

selectChange: EventEmitter<any[] | any>

Triggers when dropdown option select state changes based on defined dropdown Select Mode. To identify selected options uniquely it is necessary to specify selectTrackBy property. Therefore, a unique value key name should be set as the value for this attribute. According to this example it is 'id'. There are set of configuration are introduced in the dropdown to work smoothly with the selected change event. Those configurations can be seen as follows.

Dropdown option use selection can be select according to the defined dropdown Select Mode. for trigger select change event that perform by end-user and returns the unique data object.

Select

Select on any dropdown option to see the output

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-select-change-usage',
  templateUrl: './select-change-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class SelectChangeUsageComponent {
  public options: ExampleData[];
  public selectChangeEventData: string[] = [];

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

  public onSelectChange(selectedData: ExampleData | ExampleData[]): void {
    // if selectTrackBy property is specified, the selected option id or ids will be passed as a parameter to this method.
    this.selectChangeEventData.push(JSON.stringify(selectedData));
  }
}

Trigger Select Change On Init

triggerSelectChangeOnInit: boolean  
Default Value: false

Select change event can be manually trigger when on dropdown initialization.

Select

Select change event is triggered on dropdown init

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-trigger-select-change-on-init-usage',
  templateUrl: './trigger-select-change-on-init-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class TriggerSelectChangeOnInitUsageComponent {
  public options: ExampleData[];
  public selectChangeEventData: string = null;

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

  public onSelectChange(selectedData: ExampleData | ExampleData[]) {
    this.selectChangeEventData = 'Select change event is triggered on dropdown init';
  }
}

Trigger Select Change On First Option Select

triggerSelectChangeOnFirstOptionSelect: boolean  
Default Value: false

Triggers select change event when first option is selected by default. for use this property it is mandatory to define dropdown Set First Option Selected to true.

Cooking Gear

{ "availability": true, "availableStores": [ { "storeName": "Barneys New York", "website": "https://www.barneys.com/" }, { "storeName": "J. C. Penney", "website": "https://jcp.com/" }, { "storeName": "Von Maur", "website": "http://www.vonmaur.com/" } ], "retailerCountry": "United States", "orderMethodType": "Fax", "retailerType": "Outdoors Shop", "productLine": "Camping Equipment", "productType": "Cooking Gear", "product": "TrailChef Deluxe Cook Set", "year": 2012, "quarter": "Q1 2012", "revenue": 59628.66, "quantity": 489, "grossMargin": 0.34754797, "id": 10 }

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-trigger-select-change-on-first-option-select-usage',
  templateUrl: './trigger-select-change-on-first-option-select-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class TriggerSelectChangeOnFirstOptionSelectUsageComponent {
  public options: ExampleData[];
  public selectChangeEventData: ExampleData | ExampleData[];

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

  public onSelectChange(selectedData: ExampleData | ExampleData[]) {
    this.selectChangeEventData = selectedData;
  }
}

Trigger Select Change On Model Update

triggerSelectChangeOnModelUpdate: boolean  
Default Value: false
Select

Click on any dropdown option

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

import { ExampleData } from 'helper-models';

import { DataFetchService } from 'helper-services';

@Component({
  selector: 'app-trigger-select-change-on-model-update-usage',
  templateUrl: './trigger-select-change-on-model-update-usage.component.html',
  styleUrls: ['../../dropdown-events.component.scss']
})
export class TriggerSelectChangeOnModelUpdateUsageComponent {
  public options: ExampleData[];
  public selectChangeOnModelUpdateEventData: string = null;

  constructor(private dataFetchService: DataFetchService) {
    this.options = this.dataFetchService.fetchStaticData();
  }
}
API Doc for Dropdown Events (refer outputs section)