Angular 7 ngx-translate change run time transaltion without refresh page

Question

Notes: I tired all questions & answers related to this topic.

I want to Translate Typescript variable Value without refresh page on change language Dropdown .

I trying To change the language-wise data change. I success to change to HTML Bind: value on dropdown value change but not update TypeScript Bind: value.

i use ngx-translate

I referer Links: but not success

components.ts

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-translate',
  templateUrl: './translate.component.html',
  styleUrls: ['./translate.component.css']
})
export class TranslateComponent implements OnInit {
  typeScriptvalue: string;
  simpleProducts:any[]=[ {   
    name:'English',
    id:'en'
  },
  {   
    name:'French',
    id:'fr'
  }];

  constructor(private translate: TranslateService) {
    this.typeScriptvalue = this.translate.instant('HOME.TITLE');
   }

  ngOnInit(): void {
  }

  changeevent(e)
  {
    console.log(e);
    this.translate.use(e.value);

  }

}

component.html

 <label><b> HTML Bind</b></label> : <div>{{ 'HOME.TITLE' | translate }}</div> <br>
    <label><b>TypeScript Bind</b></label> : <div>{{ typeScriptvalue }}</div> <br>
    <label>
        Change language : <div class="dx-field-value">
            <dx-select-box  [dataSource]="simpleProducts" displayExpr="name" valueExpr="id" (onValueChanged)="changeevent($event)"></dx-select-box>
        </div>
    </label>

score 1 · Accepted Answer · answered Jun 18 '20 at 10:42

After long research I have finally got the best solution.

You can reassign the Typescript variable on the subscriber method. use method

 changeevent(e)
  {
    console.log(e);
    this.translate.use(e.value).subscribe(data => {
      this.typeScriptvalue = this.translate.instant('Home.Title');      
    });

  }

Angular 7 ngx-translate change run time transaltion without refresh page

1 Answers1