How to expand and collapse table row in angular 7

Question

I am trying to expand and collapse each table row without adding new properties(expanded1 and expanded2) in the json data. How to do it. Is it possible or not?

app.component.ts:

  export class AppComponent implements OnInit{
    expanded1 = false;
    expanded2 = false;
  data1 = [
    {
      name: 'john',
      place: 'forest',
      phone: '124-896-8963' 
    },
    {
      name: 'Jay',
      place: 'City',
      phone: '124-896-1234'
    },
    {
      name: 'Joseph',
      place: 'sky',
      phone: '124-896-9632' 
    },
  ];

  ngOnInit(){
   // this.fooGet();
  }

  // fooGet() {
  //   const modifiedData = this.data1.map((d) =>
  //     Object.assign(d, { expanded1: false, expanded2: false })
  //   ); 
  //   console.log(modifiedData);
  // }


}

Demo: https://stackblitz.com/edit/angular-jfslbe?file=src%2Fapp%2Fapp.component.ts

Answer 1

The best option is to create a new component for handling the each row with the logic to toggle the name and place details.

In this approach, the Booleans to control the visibility of the name and place details can be out sourced to the new "table component" and you can keep your JSON pretty simple.

Here is a sample implementation for the same