Angular : how to toggle selection between children components

Question

So I have got a parent component with children components binded over an ngFor() such as:

<categories *ngFor= "let category of categories" [category]="category"></categories>

Each of this categories has a title text with an ngClass like this one (being selected a variable I set to true in the children component when I click on it):

        <h3 class="my-3 px-1 category" [ngClass]="{'category-selected':selected}">
            {{ category.Title }} 
        </h3>

What I have been trying to do with little success is to turn this text green when you click on the category children element.

That works fine but my main issue is that whenever I click a second category after the first one, the first one still has the text set to green and I dont know how to set this text back to its original color when you click on a different category (ie reset its color if the category is not selected).

Answer 1

This can be done by emiiting an event from category and listening to it from parent.

Something like this.

Live example

in component.ts

selectedCategory
onSelect(category){
this.selectedCategory=category
}

in template:

<categories (selected)="onSelect(category)"
      [class.category-selected]="selectedCategory===category"
 *ngFor = "let category of categories" [category]="category"></categories>

Answer 2

Solution

So, after some testing I finally figured out the way to solve this.

In the parent component that contains the ngFor you pass a variable that will keep the information on which category is being selected :

<categories (click)="selection(category)"   *ngFor= "let category of categories"  [category]="category"  [selectedCategory]="selectedCategory"></categories>

So, whenever you click any of these categories, the selection variable will get updated such as:

  selection(category){
      this.selectedCategory = category.Title; 
  }

Then, in the children components you get this parent variable using: @Input() selectedCategory:string; and then you use a trigger that will detect whenever the parent variable has changed:

  ngOnChanges(changes: SimpleChanges) {    
    this.setClass(changes.selectedCategory.currentValue);    
}

And finally check if the newly selected variable is the same as the one in the component. I have created a variable selected that will be true if that component is the one selected an false if is the component that has not being selected. This will allow me to reset the class of the component back to its original class.

setClass(value){
  if(value===this.category.Title){
    this.selected = true;
  }else{
    this.selected = false;
  }
}

And to finish, I set my desired component to an ngClass that depends on this selected variable.

<h4 [ngClass]="{'category-selected': selected, 'category-unselected': !selected }">Text</h4>

Hope you understood everything correctly if you encounter the same issue. Don't hesitate in asking if you have any questions. :D