CODEWITHSUNDEEP
javascriptangulartypescript
R.K
R.K

Reputation: 413

using ngif inside the loop and toggling the table row with specific class when clicking on table row with another class in angular 2

I have a table generated from the data and there are 2 tr with class default and toggle-row when i click on tr with class default it should only toggle the corresponding tr with class toggle-row however my code toggles all the toggle-row class when clicked on any one of table row with class default. how do if fix this. i am using *ngIF to toggle the table rows.

Template file is like this 

<table class="table table-container table-responsive" id = "team-members">
        <thead class="table-heading">
            <tr>
            </tr>
        </thead>
        <tbody class="data-item" *ngFor = "let member of teamMember; let i = index" >
            <tr id ="{{i}}" (click)="Toggle(i)" class="default">
                <td *ngFor = "let hrs of member.Value.hoursLogged">
                    {{ hrs }}
                </td>
            </tr>
            <ng-container *ngFor = "let subtask of member.Value.subTasks">
                <tr class="toggle-row" *ngIf="toggle" > 
                        <td>
                            {{ subtask.taskType }}
                        </td>
                        <td *ngFor="let hrs of subtask.subtaskHoursLogged">
                            {{ hrs }}
                        </td>
                </tr>
            </ng-container>
        <tbody>
</table>

basically this loop creates the structure

 <table>
        <thead></thead>
        <tbody>
            <tr id="1" class="default"><tr>
            <tr class="toggle-row"></tr>
            <tr class="toggle-row"></tr>
            <tr class="toggle-row"></tr>
        </tbody>
        <tbody>
            <tr id="2" class="default"><tr>
            <tr class="toggle-row"></tr>
            <tr class="toggle-row"></tr>
            <tr class="toggle-row"></tr>
        </tbody>
        <tbody>
            <tr id="3" class="default"><tr>
            <tr class="toggle-row"></tr>
            <tr class="toggle-row"></tr>
            <tr class="toggle-row"></tr>
        </tbody>
</table>

and i want to toggle table-row class when clicked on default class only inside that tbody

and typescript file for this template is like this

import { Component, OnInit } from '@angular/core';
import { DataServiceService } from "../../services/data-service.service";
@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})
export class ProjectsComponent implements OnInit {
  private teamMember: any[];
    public toggle = false;
  constructor(private dataserve: DataServiceService) { }
  ngOnInit() {
     this.dataserve.getTeamMemberData()
      .subscribe(
          (data: any) => {
                        var localarray= [];
                        for (let key in data){
              localarray.push({key:key, Value:data[key]});
            }
                        this.teamMember = localarray;
                        console.log(this.teamMember);
                    }
            );
  }
  Toggle(value){
    this.toggle = !this.toggle;
  }
}

Upvotes: 0

Views: 1306

Answers (1)

Jayakrishnan
Jayakrishnan

Reputation: 4294

you need to move toggle variable inside member.Value.subTasks variable to make things work for each row.

As toggle is global variable, it will simply update the view for all rows.

 <ng-container *ngFor = "let subtask of member.Value.subTasks">
            <tr class="toggle-row" *ngIf="subtask.toggle" > 
                    <td>
                        {{ subtask.taskType }}
                    </td>
                    <td *ngFor="let hrs of subtask.subtaskHoursLogged">
                        {{ hrs }}
                    </td>
            </tr>
        </ng-container>

you need to change Toggle(i) function to update the member.Value.subTasks variable.

Hope it helps!.

Upvotes: 0

Related Questions