Multiple choice

The TranslatableMultipleChoice component is similar to TranslatableOptionList, but it allows to select more than one item. Taking the example of the selection list:

// app.hu.json
{
  ...
  "fruits": {
    "apple": "alma",
    "peach": "barack",
    "cherry": "cseresznye",
    "plum": "szilva"
  },
  ...
}

The TranslatableMultipleChoice class is used to handle the items:

@Component({ ... })
export class FruitComponent {

  fruits: TranslatableMultipleChoice;

  constructor(
    private translate: TranslationService
  ) {
    this.fruits = new TranslatableMultipleChoice( translate, 'app.fruits' );
  }
  ...
  fruitChange(
    event: any
  ): void {
    this.fruits.setState( event.target.value, event.target.checked );
  }
}

The key of the text node is 'app.fruits' again, and the fruit list is used in the view:

<ng-container *ngFor="let fruit of fruits">
  <label>
    <input type="checkbox" name="period" [value]="fruit.value"
           [checked]="fruit.selected"
           (change)="fruitChange( $event )">
    {{ fruit.text }}
  </label>
</ng-container>
<div>
  <button (click)="fruits.selectAll()">{{ t( 'app.multiple.all' ) }}</button>
  <button (click)="fruits.deselectAll()">{{ t( 'app.multiple.none' ) }}</button>
</div>

The TranslatableMultipleChoice component has following properties and methods:

...
  doSomething() {
    ...
    this.fruits.selectedIndeces = [ 0, 2 ];
    this.fruits.selectedValues = [ 'apple', 'cherry' ];
    ...
    const count: number = this.fruits.selectedCount;
    const indeces: Array<number> = this.fruits.selectedIndeces;
    const values: Array<string> = this.fruits.selectedValues;
    const texts: Array<string> = this.fruits.selectedTexts;
    const items: Array<TranslatableOption> = this.fruits.selectedItems;
    ...
    this.fruits.setState( 'plum', true );
    this.fruits.selectAll();
    this.fruits.deselectAll();
    ...
  }
...

The TranslatableMultipleChoice object will load the appropriate translation texts when the user changes the current language.