Search code examples
cssangularwebfocuselement

Angular get current focused element in angular

enter image description hereI have a website I am trying to do something like this, when I click on 1, I want the background of this element to change to white and when I click on the second one the background of the first one will disappear and pass to the next one...I have been trying to do this for a long time help me I don't know how to do it

<div class="oval">1</div>
<div class="oval">2</div>
<div class="oval">3</div>
Solution

  • When we need make "something" exclusive we use one unique variable

    selectedIndex:number=-1

    If you want not unselected

    <div class="oval" [class.selected]="selectedIndex==0"
                  (click)="selectedIndex=0">
    1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
                  (click)="selectedIndex=1">
    2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
                  (click)="selectedIndex=2">
    3
</div>

    If you want unselected

    <div class="oval" [class.selected]="selectedIndex==0"
                  (click)="selectedIndex=selectedIndex==0?-1:0">
    1
</div>
<div class="oval" [class.selected]="selectedIndex==1"
                  (click)="selectedIndex=selectedIndex==1?-1:1">
    2
</div>
<div class="oval" [class.selected]="selectedIndex==2"
                  (click)="selectedIndex=selectedIndex==2?-1:2">
    3
</div>

    NOTE: I use [class.selected], so we use a .css

    .selected{
   background:red;
}

    You can use style.background or style.background-color using (condition)?value:null, e.g., for the first div

    [style.background]="selectedIndex==0?'red':null