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
  2. Select
    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 = [];
      }
    }
    
  3. Additional Translations
  4. This is select place holder
    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

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.

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

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.

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

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.

This is select place holder
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'
  };
}

Selected Item Wrap Placeholder

selectedItemWrapPlaceholder: DropdownTranslations  
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.

Select
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'
  };
}
Item Selection
Option Template
Events
API Doc for Dropdown Translations