Add class to one div and remove this class from others by click in Angular

Question

1. It's just simple divs with text
2. I don't need and don't want use/create other components
3. And without querySelectors
4. Number of elements might be more then 50.
5. Text can be defferent, cities names, for example

Is there a way for

• get all elements with link class
• add by clicking to one of them active class to target
• and remove active class from others So, we have 3 same divs, but with active class only one.

__

Also, I need to chane active class for another 3 elements - image class

This is generaly tabs. But with very simple layout:

      <div class="links">
        <div class="link active">
          Link 1
        </div>
        <div class="link">
          Link 2
        </div>
        <div class="link">
          Link 3
        </div>
      </div>

      <div class="images">
        <div class="image active">
          Image 1
        </div>
        <div class="image">
          Image 2
        </div>
        <div class="image">
          Image 3
        </div>
      </div>

Answer 1

component HTML:

<div class="links">
  <div *ngFor="let i of [1,2,3]" class="link" [class.active]="clickedIndex === i" (click)="clickedIndex = i"> Link {{ i }} </div>
</div>

component class:

@Component({
  selector: 'app-root',
})
export class AppComponent {
  clickedIndex = 0;
}

Answer 2

You can totally do like @Stavm suggested in his answer (upvoted it), but since you have an array of cities (or different strings) you should just extract the index he mentioned a bit differently. An example:

Say in your component you have an array: public cities = ['London', 'Moscow', 'Stockholm', ...];

You can get the index in the for loop like this: let i = index;

<div class="links">
  <div *ngFor="let city of cities; let i = index" class="link" [class.active]="clickedIndex === i" (click)="clickedIndex = i">{{city}} </div>
</div>

UPDATE:

After your comments I add an update that will come closest to a query selector. You could consider using @ViewChildren. Check the official Angular documentation on @ViewChildren here. Also checkout the example given in this answer on another question. In your example it would be something like this:

In your component:

@ViewChildren("linkDivs") linkDivs: QueryList<ElementRef>;
@ViewChildren("imageDivs") imageDivs: QueryList<ElementRef>;

In your template:

<div class="links">
  <div #linkDivs *ngFor="let city of cities; let i = index" class="link">{{city}}</div>
</div>

<div class="images">
  <div #imageDivs *ngFor="let image of images; let i = index" class="link">{{image}}</div>
</div>

Now you get an array with the ElementRef to all link divs in that variable in your component and in the template you can grab it with linkDivs[i]. Not sure what exactly you want to do with it further though. I leave that up to you.