0

I would like to add active class after click, and I have problem with ngFor inside ngFor. When I clik on one radio, active class is added to all rows, because is the same name. Besides, now I can click only for one radio, I want to click for one radio in the row (I do not know how to make a radio independent of each other between the rows)

I want to add active class independent between rows, so eg I want to selected test1 from Lorem, test2 from Ipsum and test1 from dolor. Now I can choose only one radio from all elements.

My example https://stackblitz.com/edit/angular-aupnma?file=src%2Fapp%2Fapp.component.ts

1

2 Answers 2

4

UPDATE as Ali Shahbaz suggested to group the checkbox inputs

You can try something like this in app.component.html

    <div class="row" *ngFor="let test of tests">
      <input type="checkbox"
        id="">
        {{test.name}} 
      <div class="btn-group">
        <label class="btn btn-outline-secondary"
          *ngFor="let item of test.items"
          (click)="selectItem(item,test.id)"
          [ngClass]="{active: isSelectedItem(item) && selectedId==test.id}">
          <input
          type="radio"
          name="something{{test.id}}"/>
          {{item}}
        </label>
      </div>
    </div>

In app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  tests: any[];
  selectedItem: any;
  selectedId:number;

  constructor() {
    this.tests = [{
      id: 1, name: 'lorem', items: ['test1', 'test2', 'test3']
    },
    {
      id: 2, name: 'ipsum', items: ['test1', 'test2', 'test3']
    },
    {
      id: 3, name: 'dolor', items: ['test1', 'test2', 'test3']
    }]

  }

  selectItem(item,id) {
    this.selectedItem = item;
    this.selectedId=id;
  }

  isSelectedItem(item) {
    return this.selectedItem === item;
  };
}
2
  • ok, it solve problem with active class but still is a problem with independent radio button. I would like to can selected eg test1 from Lorem, test2 from Ipsum and test1 from dolor. Now I can choose only one radio from all elements.
    – emka26
    Sep 19, 2018 at 7:39
  • 1
    Set name for the element like this name="something{{test.id}}" Sep 19, 2018 at 7:49
2

You have 2 problems:

  • Your radios do not have a common name for each test (so that can only select one in total)

  • You only keep one selected item, so you can only ever apply the class to one item)

Modify component.ts to save selected itemS

selectedItems = {};
  selectItem(item, id) {
    this.selectedItems[id] = item;
      }

  isSelectedItem(item, id) {
    return this.selectedItems[id] && this.selectedItems[id] === item;
  };
}

Modify your template to add a common name to your radios and change the check for active class

  <label class="btn btn-outline-secondary"
          *ngFor="let item of test.items"
          (click)="selectItem(item,test.id)"
          [ngClass]="{active: isSelectedItem(item, test.id) }">
          <input
          type="radio"
          name="something_{{test.id}}"/>
          {{item}}
        </label>

Stackblitz demo

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.