I am currently implementing a BehaviorSubject for managing languages in my Angular project. I am also utilizing Angular Datatables and trying to dynamically change the language displayed in the data table based on the value returned from the subscription. Is there a way to accomplish this seamlessly?
Thank you in advance.
// Service
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class SharedService {
public lang = new BehaviorSubject<string>('en');
}
In the Component :
ngOnInit(): void {
// get language
this.langServiceSupscribtion = this.sharedService.lang.subscribe((l) => {
this.lang = l;
});
this.dtOptions = {
pagingType: 'full_numbers',
language: {
paginate: {
first: this.lang == 'ar' ? 'الأول' : 'First',
previous: this.lang == 'ar' ? 'السابق' : 'Previous',
next: this.lang == 'ar' ? 'التالي' : 'Next',
last: this.lang == 'ar' ? 'الأخير' : 'Last',
},
search: this.lang == 'ar' ? 'ابحث:' : 'Search:',
info:
this.lang == 'ar'
? 'إظهار _START_ إلى _END_ من _TOTAL_ مدخلات'
: 'Showing _START_ to _END_ of _TOTAL_ entries',
lengthMenu:
this.lang == 'ar' ? 'عرض _MENU_ مدخلات' : 'Show _MENU_ entries',
emptyTable:
this.lang == 'ar'
? 'لا يوجد بيانات متاحة في الجدول'
: 'No data available in table',
zeroRecords:
this.lang == 'ar'
? 'لم يعثر على أية سجلات'
: 'No matching records found',
infoEmpty:
this.lang == 'ar'
? 'إظهار 0 إلى 0 من أصل 0 مدخلات'
: 'Showing 0 to 0 of 0 entries',
processing: this.lang == 'ar' ? 'جارٍ المعالجة...' : 'Processing...',
},
};
}