Angular - Translate datatable columns name with NGX-Translate

Question

I have web in Angular that have a multilanguage option. This web has a datatable. The code is similar to

Switch language function

switchLanguage(language: string) {
    let currentUrl = this.router.url;
    this.translate.use(language);
    this.router
          .navigateByUrl("", { skipLocationChange: true })
          .then(() => this.router.navigate([currentUrl]));
}

Datatable view

  ngOnInit() {
    this.datatable()
  }

  datatable() {
    const self = this;
    this.table = $('#userList').DataTable({
      order: [5, "desc"],
      pagingType: "full_numbers",
      pageLength: 25,
      responsive: true,
      processing: true,
      searching: true,
      deferRender: true,
      stateSave: true,
      columnDefs: [
        {
          targets: [0, 11],
          orderable: false
        },
        { targets: 0, "width": "5%" },
        { targets: 11, "width": "10%" },
        { targets: 7, "width": "15%" },
        { targets: 6, "width": "10%" },
        { targets: 5, "width": "10%" },
        { targets: "_all", defaultContent: '-' },
      ],
      ajax: { ENDPOINT },
      columns: [
        {
          title: this.translate.instant('user'),
          data: 'username',
        },
      ]
    }

The problem: When we call

this.router.navigateByUrl("", { skipLocationChange: true }).then(() => this.router.navigate([currentUrl]));

Code try to recreate datatable but returns this error. This error makes sense, but how can avoid this? Also, i try to add destroy:true to datatable options to try destroy and recreate datatable when change language, but destroy also on first load so doesn´t work as expected.

So, simplified question: I try to change datatable columns (JQuery library) name when user change language dynamically. ¿What´s the right way?

Никита Середа · Answer 1 · 2021-05-21T09:03:15.140

u can look my answer here

ts.instant('...') will work after navigate & after refresh page (u need appInitializerFactory & add it to providers like in example)

also mabe this will help:

in component:

constructor(private router: Router, private cdr: ChangeDetectorRef) {
    this.routerEventsSubscription = this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      map(() => this.route),
      map((route) => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      filter((route) => route.outlet === 'primary'),
      mergeMap((route) => route.data)
    ).subscribe((event) => {
      this.cdr.markForCheck();
    });
} 
ngOnDestroy() {
    this.routerEventsSubscription?.unsubscribe();
}

here after navigation ends u told component to rerendering

Angular - Translate datatable columns name with NGX-Translate

1 Answers1