Dropdown List Translations
Translations can be uses to override dropdown native property labels. those translatable properties are required to binding into translations
property in dropdown global level configuration (within ng-dropdown scope), in any developer preferred language. the properties that can be configure in translations are:
- Translations for No Data Scenario
- No Data Message
- Additional Translations
- Selected Option Wrap Placeholder
- Select Placeholder
- Filter Placeholder
Let's see how each properties are behaves on different conditions in below Useful Properties section.
What You Will See
Translations for No Data
Additional Translations
import { Component } from '@angular/core'; import { DropdownTranslations } from 'ornamentum'; @Component({ selector: 'app-translations-no-data-message-usage', templateUrl: './translations-no-data-message-usage.component.html' }) export class TranslationsNoDataMessageUsageComponent { public options: any[]; public dropdownTranslations: DropdownTranslations = { noDataMessage: 'Customized No Data Message' }; constructor() { this.options = []; } }
<ng-dropdown [id]="'products_advanced_05'" [options]="options" [translations]="dropdownTranslations"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TranslationsNoDataMessageUsageComponent } from './translations-no-data-message-usage.component'; @NgModule({ bootstrap: [TranslationsNoDataMessageUsageComponent], declarations: [TranslationsNoDataMessageUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TranslationsNoDataMessageUsageModule { }
import { Component } from '@angular/core'; import { DropdownTranslations } from 'ornamentum'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-additional-translations-usage', templateUrl: './additional-translations-usage.component.html' }) export class AdditionalTranslationsUsageComponent { public options: ExampleData[]; public dropdownTranslations: DropdownTranslations = { filterPlaceholder: 'This is filter place holder', selectedOptionWrapPlaceholder: 'Wrapped Options', selectPlaceholder: 'This is select place holder' }; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_advanced_06'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [translations]="dropdownTranslations" [selectMode]="'multi'" [filterable]="true" [wrapDisplaySelectLimit]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { AdditionalTranslationsUsageComponent } from './additional-translations-usage.component'; @NgModule({ bootstrap: [AdditionalTranslationsUsageComponent], declarations: [AdditionalTranslationsUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class AdditionalTranslationsUsageModule { }
Basic Usage
As mention in the introduction, translations can be override. by default translations are initialize to it's default pre-set values. simply bind DropdownTranslations
type of object into translations property is enough to take the the control over translations.
<ng-dropdown ... [translations]="dropdownTranslations"> </ng-dropdown>
Useful Properties
Properties that can be uses with dropdown translations will be discuss in this section in more details each by each.
No Data Message
noDataMessage: DropdownTranslations
Default Value: 'No Results Available'
This configuration is uses to set a message to show in dropdown body when on no data is available to display. by providing a value to noDataMessage
will override the default no data message.
import { Component } from '@angular/core'; import { DropdownTranslations } from 'ornamentum'; @Component({ selector: 'app-translations-no-data-message-usage', templateUrl: './translations-no-data-message-usage.component.html' }) export class TranslationsNoDataMessageUsageComponent { public options: any[]; public dropdownTranslations: DropdownTranslations = { noDataMessage: 'Customized No Data Message' }; constructor() { this.options = []; } }
<ng-dropdown [id]="'products_advanced_05'" [options]="options" [translations]="dropdownTranslations"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TranslationsNoDataMessageUsageComponent } from './translations-no-data-message-usage.component'; @NgModule({ bootstrap: [TranslationsNoDataMessageUsageComponent], declarations: [TranslationsNoDataMessageUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TranslationsNoDataMessageUsageModule { }
Filter Placeholder
filterPlaceholder: DropdownTranslations
Default Value: 'Search'
This configuration is uses to customize the placeholder text for dropdown when filterable
is enabled. translation can be override by binding filterPlaceholder
string into DropdownTranslations
type of object.
import { Component } from '@angular/core'; import { DropdownTranslations } from 'ornamentum'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-translations-filter-placeholder-usage', templateUrl: './translations-filter-placeholder-usage.component.html' }) export class TranslationsFilterPlaceholderUsageComponent { public options: ExampleData[]; public dropdownTranslations: DropdownTranslations = { filterPlaceholder: 'This is filter place holder' }; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } }
<ng-dropdown [id]="'products_advanced_04'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [translations]="dropdownTranslations" [filterable]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TranslationsFilterPlaceholderUsageComponent } from './translations-filter-placeholder-usage.component'; @NgModule({ bootstrap: [TranslationsFilterPlaceholderUsageComponent], declarations: [TranslationsFilterPlaceholderUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TranslationsFilterPlaceholderUsageModule { }
Select Placeholder
selectPlaceholder: DropdownTranslations
Default Value: 'Select'
This configuration is uses to customize the main text on top of the dropdown (select placeholder). translation can be override by binding selectPlaceholder
string into DropdownTranslations
type of object.
import { Component } from '@angular/core'; import { DropdownTranslations } from 'ornamentum'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-translations-select-placeholder-usage', templateUrl: './translations-select-placeholder-usage.component.html' }) export class TranslationsSelectPlaceholderUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } public dropdownTranslations: DropdownTranslations = { selectPlaceholder: 'This is select place holder' }; }
<ng-dropdown [id]="'products_advanced_03'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [translations]="dropdownTranslations" [filterable]="true"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TranslationsSelectPlaceholderUsageComponent } from './translations-select-placeholder-usage.component.component'; @NgModule({ bootstrap: [TranslationsSelectPlaceholderUsageComponent], declarations: [TranslationsSelectPlaceholderUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TranslationsSelectPlaceholderUsageModule { }
Selected Option Wrap Placeholder
selectedOptionWrapPlaceholder: DropdownTranslations
Default Value: 'Options'
This configuration is uses to customize text which shows to indicate the selected wrapped options count. it can be configure by binding a filterPlaceholder
string into DropdownTranslations
type of object.
For enable selected options wrapping, it is mandatory to set selectMode
to 'multi' and wrapDisplaySelectLimit
should be less than the available option count. for more details about wrap display selection limit please refer Option Selection Wrap Display Select Limit section.
Please select two or more options from the dropdown to manipulate it's usages.
import { Component } from '@angular/core'; import { DropdownTranslations } from 'ornamentum'; import { ExampleData } from 'helper-models'; import { DataFetchService } from 'helper-services'; @Component({ selector: 'app-translations-selected-option-wrap-placeholder-usage', templateUrl: './translations-selected-option-wrap-placeholder-usage.component.html' }) export class TranslationsSelectedOptionWrapPlaceholderUsageComponent { public options: ExampleData[]; constructor(private dataFetchService: DataFetchService) { this.options = this.dataFetchService.fetchStaticData(); } public dropdownTranslations: DropdownTranslations = { selectedOptionWrapPlaceholder: 'Wrapped Options' }; }
<ng-dropdown [id]="'products_advanced_02'" [selectTrackBy]="'id'" [displayTrackBy]="'productType'" [options]="options" [translations]="dropdownTranslations" [selectMode]="'multi'" [filterable]="true" [wrapDisplaySelectLimit]="1"> </ng-dropdown>
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { DropdownModule } from 'ornamentum'; import { TranslationsSelectedOptionWrapPlaceholderUsageComponent } from './translations-selected-option-wrap-placeholder-usage.component'; @NgModule({ bootstrap: [TranslationsSelectedOptionWrapPlaceholderUsageComponent], declarations: [TranslationsSelectedOptionWrapPlaceholderUsageComponent], imports: [ BrowserModule, DropdownModule.forRoot() ] }) export class TranslationsSelectedOptionWrapPlaceholderUsageModule { }
Suggested Links
Option SelectionOption Template
Events
API Doc for Dropdown Translations