As a newcomer to the Angular world, I'm facing challenges when it comes to displaying different images based on ngx-translate methods. For instance, if the user selects English from the language dropdown, the image with English text should be displayed; and if Mandarin is chosen, then the corresponding image with Mandarin text should appear. Below is the snippet of code that I've tried using ngIf:
Here is the relevant code from both the ts and html files. Thank you in advance for your assistance :)
.ts file:
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgbCarousel, NgbSlideEvent, NgbSlideEventSource } from '@ng-bootstrap/ng-bootstrap';
import {
trigger,
state,
style,
animate,
transition
} from '@angular/animations';
import {TranslateService} from '@ngx-translate/core';
import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';
import defaultLanguage from "../../assets/i18n/en.json";
@Component({
selector: 'ngbd-carousel-pause',
templateUrl: './carousel-pause.html',
encapsulation: ViewEncapsulation.None,
styles:[`
// Styles go here
`]
})
export class NgbdCarouselPause {
constructor(private translate: TranslateService) {
translate.setTranslation('en', defaultLanguage);
translate.setDefaultLang('en');
}
useLanguage(language: string) {
this.translate.use(language);
}
// More functionality goes here...
.html file:
<!-- HTML code goes here -->