CODEWITHSUNDEEP
angulartypescript
Jan De Dev
Jan De Dev

Reputation: 227

When language changes do a new service call

I have a component where I route to, so it has no parent/child. I change the language via the TranslateService, which get's called from my app.component which is the base of my application. I call a service to get a HTML file from the backend, but when I change the language I want to do a new call to get the document in another language.

I can't use ngOnchanges since there is no @Input() and I can't change the backend since it's from a legacy application which gets used by another application.

app.component.ts

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {
    constructor(private translateService: TranslateService) {
    }

    public changeLanguage(language) {
        this.translateService.use(language);
        this.translateService.setDefaultLang(language);
    }
}

Disclaimer

@Component({
    selector: 'app-disclaimer',
    templateUrl: 'vastgeklikteRechten.component.html',
    styleUrls: ['vastgeklikteRechten.component.scss']
})

export class VastgeklikteRechtenComponent {
    @ViewChild('dataContainer') dataContainer: ElementRef;

    text = '';

    constructor(
        private translateService: TranslateService,
        private vastgeklikteRechtenService: VastgeklikteRechtenService
    ) {
        this.vastgeklikteRechtenService.getVastgeklikteRechten(
        this.getLanguage()).subscribe(text => {
            this.text = text;
            this.loadData(text);
        });
    }

    loadData(data) {
        this.dataContainer.nativeElement.innerHTML = data;
    }

    getLanguage() {
        return this.translateService.getDefaultLang();
    }
}

Upvotes: 1

Views: 604

Answers (1)

Jan De Dev
Jan De Dev

Reputation: 227

Changed my constructor in my disclaimer. I still need the original call to get the html file from my service, here's the constructor:

constructor(private location: Location,
          private translateService: TranslateService,
          private vastgeklikteRechtenService: VastgeklikteRechtenService) {
this.vastgeklikteRechtenService.getVastgeklikteRechten(this.getLanguage()).subscribe(text => {
  this.text = text;
  this.loadData(text);
});
this.onLanguageChanged();
}

and I added a method called onLanguageChanged() where I subscribe on the eventEmitter I found in the TranslationService. So now when the event 'onLangChange' occurs I do a new call.

onLanguageChanged() {
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
  this.vastgeklikteRechtenService.getVastgeklikteRechten(
    event.lang).subscribe(text => {
    this.text = text;
    this.loadData(text);
  });
});
}

Upvotes: 1

Related Questions