Angular DataTable : Not updating the Language in runtime

Question

I have used angular Datatable And used TranslateModule to update the selected language.

Datatable :

<table datatable [dtOptions]="dtOptions" class="row-border hover" id="dataTableMasteRole">

Runtime Language Update :

<th>{{'roles.id' | translate}}</th>

dtOptions :

this.dtOptions = {

      pagingType: 'full_numbers',
      pageLength: 10,
      serverSide: true,
      processing: true,
      scrollY: '370px',
      ajax: (dataTablesParameters: any, callback) => {
        dataTablesParameters.minNumber = dataTablesParameters.start + 1;
        dataTablesParameters.maxNumber =
          dataTablesParameters.start + dataTablesParameters.length;
        this.http
          .post<DataTablesResponse>(
            this.jsonConfigService.appConfig.commonUrl + '.....',
            dataTablesParameters,
            {}
          )
          .subscribe(resp => {
            this.masterRoles = resp.data.filter(x => x.recordsFiltered != 0 && x.recordsTotal != 0);
            callback({
              recordsTotal: resp.data[0].recordsTotal,
              recordsFiltered: resp.data[0].recordsFiltered,
              data: []
            });
          });
      },
      // columns: [{ data: 'id' }, { data: 'firstName' }, { data: 'lastName' }]
    };
  }

Languages key value Pair is stored in en.json and ch.json files.

While I change the language , datatable headers are not updated runtime. I need to go back and again come to that particular page to see the update language.

My doubt is : Adding server side pagination to this grid is causing issue. Can anyone help what needs to be change/updated to get the updated language in Grid header.