CODEWITHSUNDEEP
angulartypescript
Damcho Thinley
Damcho Thinley

Reputation: 37

select only one in each row

I have five rows with two checkboxes each generated with a loop and using property binding with a click function. Currently, when I click on one item, all elements in the column are also selected but I want to achieve this row wise. Is there any method to achieve this?

my component.ts

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

enum CheckBoxType { APPLY_FOR_JOB, MODIFY_A_JOB, NONE };
@Component({
  selector: 'app-select-fav',
  templateUrl: './select-fav.component.html',
  styleUrls: ['./select-fav.component.css']
})
export class SelectFavComponent implements OnInit {
  public fruits = ["apple", "straw berry","orange","plum","grapes"]

  check_box_type = CheckBoxType;

  currentlyChecked: CheckBoxType;

  selectCheckBox(targetType: CheckBoxType) {
    // If the checkbox was already checked, clear the currentlyChecked variable
    if(this.currentlyChecked === targetType) {
      this.currentlyChecked = CheckBoxType.NONE;
      return;
    }

    this.currentlyChecked = targetType;
  }

}

my component.html

<button>Like All</button>
<div *ngFor="let item of fruits;  let i = index">
    <p>{‌{item}}</p>
    Like: <input type="checkbox" name="test" 
    [checked]="currentlyChecked === check_box_type.APPLY_FOR_JOB" 
    (click)="selectCheckBox(check_box_type.APPLY_FOR_JOB)">

    Dislike : <input type="checkbox" name="test"
    [checked]="currentlyChecked === check_box_type.MODIFY_A_JOB" 
    (click)="selectCheckBox(check_box_type.MODIFY_A_JOB)">
    <hr>
</div>

PS: when I click on the button it should check all the like checkboxes in column.

Upvotes: 1

Views: 469

Answers (1)

mwilson
mwilson

Reputation: 12900

Part of your problem is that you're trying to track a 1:many with your current logic. For these things, it's best to structure your data to capture the properties for each object (the fruit). Then, you can use [(ngModel)] to bind everything.

Stackblitz Example

TypeScript

import { Component, OnInit } from '@angular/core';
enum CheckBoxType { LIKEME, DISLIKE, NONE };
@Component({
  selector: 'app-select-one',
  templateUrl: './select-one.component.html',
  styleUrls: ['./select-one.component.css']
})
export class SelectOneComponent implements OnInit {
  public fruits = ["apple", "straw berry","orange","plum","grapes"].map( f => ({ name: f, like: false, dislike: false }));
  check_box_type = CheckBoxType;

  currentlyChecked: CheckBoxType;
  constructor() { }

  ngOnInit() {}

  selectAllLike(){
     this.fruits.forEach( f => {
       f.like = true;
       f.dislike = false;
     })
  }
}

HTML

<button (click)="selectAllLike()" >Like All</button>
<div *ngFor="let item of fruits;  let i = index">
    <p>{{item | json}}</p>
    Like: <input type="checkbox" name="test" [(ngModel)]="item.like" [disabled]="item.dislike">

Dislike : <input type="checkbox" name="test" [(ngModel)]="item.dislike" [disabled]="item.like">
    <hr>
</div>

On a side note, I would use Angular Material MatTable for tables. It's much cleaner and more feature-complete.

https://material.angular.io/components/table/overview

Here is version using a function to toggle the different states:

https://stackblitz.com/edit/angular-pwhxhd?file=src%2Fapp%2Fselect-one%2Fselect-one.component.html

Upvotes: 1

Related Questions