Angular switch opacity based on value

Question

So I have these two flags:

<div class="flag flag-srb" id="2" (click)="changeLanguage(2)">
    <img src="assets/flags/srb.png" alt="srb" height="64" width="64">
</div>
<div class="flag flag-eng" id="1" (click)="changeLanguage(1)">
    <img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>

By default the opacity is 0.5 in both of these. The css:

.flag {
    display: inline;
    padding-right: 10px;
    opacity: 0.5;
}

Now I want to change the opacity to 1 depeding on the one the user has selected. Then when he switches to a different flag (clicks on a different flag) the opacity changes to 1 for the one he selected and reverts to 0.5 the other one.

When he clicks the flag he activates this function:

 changeLanguage(id){
    this.sightService.changeLanguageId(id);
    this.sightService.getSights().subscribe(sights => {
      this.sights = sights;
    });

    console.log("this.sights is now: ", this.sights);
    console.log("id is",id);

    var testNula = document.getElementById(id); //GET PICTURE WITH ID
    var testDva = document.getElementById(id).id; //GET PICTURE ID, THE NUMBER

    if(testDva == this.sights[0].pin_lang_id) { //WHAT I TRIED
      console.log("THIS ONE IS SELECTED", testDva);
      testNula.style.opacity = "1";
    } else if (testDva != this.sights[0].pin_lang_id) {
      testNula.style.opacity = "0.5";
    }
  }

Note that this.sights[0].pin_lang_id is loaded with a service. So that changes when he clicks the flag. I wanted to change the opacity using this.

Also, when the page loads the this.sights[0].pin_lang_id is 2, so the first flag should be opacity 1, the other 0.5. When he clicks the English flag, the first flag should be 0.5 while the English 1.

Answer 1

in the.ts create a new variable selectedLang in the changeLanguageId update the variable based on the index

 changeLanguage(id){
    this.sightService.changeLanguageId(id);
    this.sightService.getSights().subscribe(sights => {
      this.sights = sights;
    });
    this.selectedLang = id;
  }

<div class="flag flag-srb" id="2" [style.opacity]="{{this.selectedLang === 2 ? 1 : 0.5}}" (click)="changeLanguage(2)">
    <img src="assets/flags/srb.png" alt="srb" height="64" width="64">
</div>
<div class="flag flag-eng" id="1" [style.opacity]="{{this.selectedLang === 1 ? 1 : 0.5}}" (click)="changeLanguage(1)">
    <img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>

Answer 2

You can set a variable as selected flag index

var selectedflag 

index;

Then as per the service gives you the index set the flags value

this.selectflagindex =this.sights[0].pin_lang_id;

Then in the template compare the selected index and set the opacity to 1 but by default set it to 0.5 for all

You div goes like this

<div [ngStyle]="{'opacity':check selected(id)}" </div>


checkselected(id){ return this.selectedFlag == id ? '1' :'0.5'}

By sending appropriate id the value of opacity will be set for the div.

This will do for any amount of language not only for two

Answer 3

Use [class]:

<div class="flag flag-srb" id="2" [class.fullOpacity]="fullOpacity==2" (click)="changeLanguage(2); fullOpacity="2">
    <img src="assets/flags/srb.png" alt="srb" height="64" width="64">
</div>
<div class="flag flag-eng" id="1" [class.fullOpacity]="fullOpacity==1"(click)="changeLanguage(1);[class.fullOpacity]="fullOpacity==1">
    <img src="assets/flags/eng.png" alt="eng" height="64" width="64">
</div>

.full-opacity{
    opacity:1 // you may need to set !important
}