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 (i.e reset its color if the category is not selected).

Every category should have its own selected property.. – MikeOne Sep 24 '20 at 16:13 — MikeOne, Sep 24 '20 at 16:13

meblum · Answer 1 · 2020-09-25T16:41:44.737

2

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>

edited Sep 25 '20 at 16:41

answered Sep 24 '20 at 18:35

meblum

1,654
12
23

Not working. First ```(selected)```does not work and I had to change it by a ```(click)``` event. Secod as it is the parent component the part ```selectedCategory===category```is never satisfied as the parent component has all the individual children components. Third, I am trying to set/unset the title color of an ```h4``` inside the children categories component and therefore the class must be chagend in their individual components. Thanks for trying to help anyways ! :D – Mateo Randwolf Sep 25 '20 at 08:37
I'll upload a stackblitz example how to do it. Will try to do it later. – meblum Sep 25 '20 at 12:38
OK. Here is a live example https://stackblitz.com/edit/angular-category-select – meblum Sep 25 '20 at 16:40
Hi ! Your answer is correct for another case scenario. Unfortunatelly, you did not understood completely the child/parent component thing as I did not explain it as correctly as I should have. I deeply apologise for this.I will update this question with the answer that eventually did work for me. Thanks anyway :D ! – Mateo Randwolf Sep 28 '20 at 06:35

score -1 · Answer 2 · edited Nov 13 '22 at 18:19

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>

Please refrain from rolling back good edits. Marking your answers as "solution" is unnecessary - if it were needed then all answers would have that title. Equally, readers know to ask for clarifications, and it does not need to be added to any (or every) answer on the site. I would have a reasonable degree of confidence that moderators would agree with my position, but I'd prefer that you just gave way instead - they are volunteers and are busy enough with their workload as it is. — halfer, Nov 13 '22 at 18:20

Angular : how to toggle selection between children components

2 Answers2