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.
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(); } }
<ng-dropdown [id]="'products_advanced_12'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [setFirstOptionSelected]="true" [triggerSelectChangeOnInit]="true" [triggerSelectChangeOnFirstOptionSelect]="true" [triggerSelectChangeOnModelUpdate]="true" (dataBound)="onDataBound()" (init)="onDropdownInit($event)" (selectChange)="onSelectChange($event)"> </ng-dropdown> <br/> <p class="event-output"> <span *ngFor="let option of getAllEventsData()">{{ option }}<br/></span> </p>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { EventsUsageComponent } from './events-usage.component'; @NgModule({ bootstrap: [EventsUsageComponent], declarations: [EventsUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class EventsUsageModule { }
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.
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'; } }
<ng-dropdown [id]="'products_advanced_13'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" (init)="onDropdownInit($event)"> </ng-dropdown> <br/> <p class="event-output"> <span>{{ initEventData }}</span> </p>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { InitUsageComponent } from './init-usage.component'; @NgModule({ bootstrap: [InitUsageComponent], declarations: [InitUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class InitUsageModule { }
Data Bound
dataBound: EventEmitter<void>
Data bound property will triggers right after completion of data binding to the dropdown.
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'; } }
<ng-dropdown [id]="'products_advanced_11'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" (dataBound)="onDataBound()"> </ng-dropdown> <br/> <p class="event-output" *ngIf="dataBoundEventData; else noDataAvailable"> <span>{{ dataBoundEventData }}</span> </p> <ng-template #noDataAvailable> <p class="event-output">Please wait... Data binding is in progress</p> </ng-template>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { DataBoundUsageComponent } from './data-bound-usage.component'; @NgModule({ bootstrap: [DataBoundUsageComponent], declarations: [DataBoundUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class DataBoundUsageModule { }
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 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)); } }
<ng-dropdown [id]="'products_advanced_10'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [selectMode]="'multi'" (selectChange)="onSelectChange($event)"> </ng-dropdown> <br/> <p class="event-output" *ngIf="selectChangeEventData.length; else noDataAvailable"> <span *ngFor="let option of selectChangeEventData.slice().reverse()">{{ option }}<br/></span> </p> <ng-template #noDataAvailable> <p class="event-output">Select on any dropdown option to see the output</p> </ng-template>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { SelectChangeUsageComponent } from './select-change-usage.component'; @NgModule({ bootstrap: [SelectChangeUsageComponent], declarations: [SelectChangeUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class SelectChangeUsageModule { }
Trigger Select Change On Init
triggerSelectChangeOnInit: boolean
Default Value: false
Select change event can be manually trigger when on dropdown initialization.
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'; } }
<ng-dropdown [id]="'products_advanced_09'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [triggerSelectChangeOnInit]="true" (selectChange)="onSelectChange($event)"> </ng-dropdown> <br /> <p class="event-output" *ngIf="selectChangeEventData"> <span>{{ selectChangeEventData }}</span> </p>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TriggerSelectChangeOnInitUsageComponent } from './trigger-select-change-on-init-usage.component'; @NgModule({ bootstrap: [TriggerSelectChangeOnInitUsageComponent], declarations: [TriggerSelectChangeOnInitUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TriggerSelectChangeOnInitUsageModule { }
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
.
{
"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; } }
<ng-dropdown [id]="'products_advanced_07'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [setFirstOptionSelected]="true" [triggerSelectChangeOnFirstOptionSelect]="true" (selectChange)="onSelectChange($event)"> </ng-dropdown> <br/> <p class="event-output" *ngIf="selectChangeEventData"> <span>{{ selectChangeEventData | json }}<br/></span> </p>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TriggerSelectChangeOnFirstOptionSelectUsageComponent } from './trigger-select-change-on-first-option-select-usage.component'; @NgModule({ bootstrap: [TriggerSelectChangeOnFirstOptionSelectUsageComponent], declarations: [TriggerSelectChangeOnFirstOptionSelectUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TriggerSelectChangeOnFirstOptionSelectUsageModule { }
Trigger Select Change On Model Update
triggerSelectChangeOnModelUpdate: boolean
Default Value: false
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(); } }
<ng-dropdown [id]="'products_advanced_08'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [triggerSelectChangeOnModelUpdate]="true" [(ngModel)]="selectChangeOnModelUpdateEventData"> </ng-dropdown> <br/> <p class="event-output" *ngIf="selectChangeOnModelUpdateEventData; else noDataAvailable"> <span>{{ selectChangeOnModelUpdateEventData | json }}</span> </p> <ng-template #noDataAvailable> <p class="event-output">Click on any dropdown option</p> </ng-template>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { DropdownModule } from 'ornamentum'; import { TriggerSelectChangeOnModelUpdateUsageComponent } from './trigger-select-change-on-model-update-usage.component'; @NgModule({ bootstrap: [TriggerSelectChangeOnModelUpdateUsageComponent], declarations: [TriggerSelectChangeOnModelUpdateUsageComponent], imports: [ BrowserModule, FormsModule, DropdownModule.forRoot() ] }) export class TriggerSelectChangeOnModelUpdateUsageModule { }