Search code examples
angulartranslate

Is it possible to use translate method to swap out entire picture? ANGULAR


trying to change image on button click. the button is connected to the transalte function to change language on page. I would like to change the pictures aswell using this mehtod if possible. (new to angular) would appreciate help.

html.

   <image sexternalResourcesRequired="true"[attr.src] ='{{imgTranslate| translate}}'  [attr.xlink:href]="contentBase + '/img/img.jpg'preserveAspectRatio="xMinYMin meet" />

translate.ts

imgTransalte: " translateTothisImg"

Solution

  • The answer is a little bit late but I find a solution to this problem. In my case, I have the images in the assets folder. So I create an object that looks like

    {
      img: {
       en: '../assets/images/en/imageName.png',
       gr: '../assets/images/gr/imageName.png'
      }
    }
    

    The translate service has a function named onLangChange and I subscribe to it in order to get the selected language.

    So in my template, I wrote

    <img [src]="item.img[currentLang]">
    

    Now if you change language your image should change. This works for me and I hope that I have help.

    Thanks