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

1. Translations for No Data

Select
• translations-no-data-message-usage.component.ts
• translations-no-data-message-usage.component.html
• translations-no-data-usage.module.ts

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 = [];
  }
}

2. Additional Translations

This is select place holder
• additional-translations-usage.component.ts
• additional-translations-usage.component.html
• additional-translations-usage.module.ts

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();
  }
}

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

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

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

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

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