I am using ngx-translate with Angular. I want to change an image depending on the language used in the application. The thing is that I can´t change the image when I click a language. I have two languages 'en' and 'es'.

This is my 'header.component.html'. This is the component which has the menu of the application. As you can see there is an 'updateSrc()' function 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>

Also I have another component 'looker.component.html' where the image have to change.

<div class="map">

    <img class="graph" src="{{first_url}}" alt="graph">

</div>

And this is my 'looker.component.ts' where I am not sure how to write the updateSrc() function in order to change the other URL when someone clicks one of the two languages.

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) {   


  }


}