How can I change the language url in runtime using angular 7?

Marcusshaocong

Hi all,

I am currently building a data table using angular 7, and I want to have a dropdown menu to switch different languages for the internationalization support. To my understanding, the dtoption has a language.url option which can specify which language to use. I have no problem to set the default language during the table initialization. However, I don't know how how to make it work after I change the url option to a different language file when the event of of switching the lang is triggered. Any help or working examples will be appreciated. Thanks.

colin

Hi @Marcusshaocong ,

That's an initialisation option, so you would need to destroy the table (destroy()) and recreate it (you can use destroy here) with the new URL,

Cheers,

Colin

Marcusshaocong

Hi Colin,

Thanks for the quick reply. What I wanted to do is to change the dtOptions' language.url to point to a different language file when the langChange event is trigger.

I have tried use the destroy() and then the draw() to re-render the table, however it does not take effect. Do you know how to do it correctly? I think my point is change the dtOptions' language setting after the table has been initialized, looks like the destroy() and draw() did not do the trick.

  langChange(): void {
    this.translate.onLangChange.subscribe((event: TranslationChangeEvent) => {
      console.log('langChange', event)
      console.log("db", this.datatableElement)
      this.dtOptions.language.url = "/assets/i18n/datatable.fr.json";
      this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
        dtInstance.table('#dtPluginExample').i18n( 'buttons.edit', 'Copy to clipboard' )
        dtInstance.destroy(false);
        console.log("init", dtInstance.init())
        //dtInstance.draw();
        dtInstance.ajax.reload((callback)=>{
          console.log("callback", callback)
      });
    });
  }

colin

Hi @Marcusshaocong ,

Yep, once you've called destroy(), you'll need to reinitialise the table with new setting. I see you're calling dtInstance.init() but that code isn't there.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Marcusshaocong

Hi @colin,

Can you roughly tell me what is the potential interface or api to reinitialise the table with new setting in this case?

I am using angular 7 and a lot of third party modules, I am not sure if I can fully replicate the same test case here, it might take me a lot of time to do that. Very much appreciated for your help. Thanks.

colin

Hi @Marcusshaocong ,

It would be the same as the original initialisation - just with the URL path. You could even just add destroy as I mentioned above, so you wouldn't need to call destroy, something like this.

Cheers,

Colin