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 Item 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 items: any[];

  public dropdownTranslations: DropdownTranslations = {
    noDataMessage: 'Customized No Data Message'
  };

  constructor() {
    this.items = [];
  }
}

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 items: ExampleData[];

  public dropdownTranslations: DropdownTranslations = {
    filterPlaceholder: 'This is filter place holder',
    selectedItemWrapPlaceholder: 'Wrapped Items',
    selectPlaceholder: 'This is select place holder'
  };

  constructor(private dataFetchService: DataFetchService) {
    this.items = 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 items: any[];

  public dropdownTranslations: DropdownTranslations = {
    noDataMessage: 'Customized No Data Message'
  };

  constructor() {
    this.items = [];
  }
}

<ng-dropdown
  [items]="items"
  [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 items: ExampleData[];

  public dropdownTranslations: DropdownTranslations = {
    filterPlaceholder: 'This is filter place holder'
  };

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

<ng-dropdown
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [items]="items"
  [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 items: ExampleData[];

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

  public dropdownTranslations: DropdownTranslations = {
    selectPlaceholder: 'This is select place holder'
  };
}

<ng-dropdown
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [items]="items"
  [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 Item Wrap Placeholder

Default Value: 'Items'

This configuration is uses to customize text which shows to indicate the selected wrapped items count. it can be configure by binding a filterPlaceholder string into DropdownTranslations type of object.

For enable selected items wrapping, it is mandatory to set selectMode to 'multi' and wrapDisplaySelectLimit should be less than the available item count. for more details about wrap display selection limit please refer Item Selection Wrap Display Select Limit section.

Please select two or more items 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-item-wrap-placeholder-usage',
  templateUrl: './translations-selected-item-wrap-placeholder-usage.component.html'
})
export class TranslationsSelectedItemWrapPlaceholderUsageComponent {
  public items: ExampleData[];

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

  public dropdownTranslations: DropdownTranslations = {
    selectedItemWrapPlaceholder: 'Wrapped Items'
  };
}

<ng-dropdown
  [selectTrackBy]="'id'"
  [displayTrackBy]="'productType'"
  [items]="items"
  [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 { TranslationsSelectedItemWrapPlaceholderUsageComponent } from './translations-selected-item-wrap-placeholder-usage.component';

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

Suggested Links