My Angular application is utilizing ngx-translate to support multiple languages. I am trying to dynamically change an image based on the language selected by the user. However, I am facing difficulty in updating the image when a language is clicked. The application supports two languages: 'en' and 'es'.
The code snippet below is from my 'header.component.html', which contains the menu of the application. There is an 'updateSrc()' function present in the click attribute.
<div class="select-box__current" tabindex="1">
<div class="select-box__value" (click)="useLanguage('es');updateSrc(second_url);">
<input class="select-box__input" type="radio" id="0" value="1" />
<p class="select-box__input-text">es</p>
</div>
<div class="select-box__value" (click)="useLanguage('en');updateSrc(first_url);">
<input class="select-box__input" type="radio" id="1" value="2" checked="checked"/>
<p class="select-box__input-text">en</p>
</div>
</div>
Furthermore, there is another component named 'looker.component.html' where the image needs to be altered based on the selected language.
<div class="map">
<img class="graph" src="{{first_url}}" alt="graph">
</div>
In my 'looker.component.ts' file, I am uncertain about how to implement the updateSrc() function to switch to the other URL once a language is clicked. Any guidance on this would be appreciated.
import { Component, OnInit, PLATFORM_ID, Inject } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
@Component({
selector: 'app-looker',
templateUrl: './looker.component.html',
styleUrls: ['./looker.component.scss']
})
export class LookerComponent implements OnInit {
first_url: string = "https://storage.googleapis.com/amarello-web-assets/img/graph_2.svg";
second_url: string = "https://storage.googleapis.com/amarello-web-assets/img/graph_1.svg";
constructor(
private title: Title,
private meta: Meta,
@Inject(PLATFORM_ID) private platformId: Object
) { }
ngOnInit(): void {
this.first_url;
}
updateSrc(url) {
}
}