Im using collapsible list for resolve response with nested objects. Html:

<h1>Angular - Nested HTML "Table"</h1>
<div >
  <div  *ngFor="let row of rows; let rowIndex = index">
    <div [class.clickable]="isRowClickable(rowIndex)" (click)="expanded[row.id] = !expanded[row.id]">
      <div >
        <!-- <span  *ngIf="isRowClickable(rowIndex)">
          <span *ngIf="expanded[row.id]">-</span>
          <span *ngIf="!expanded[row.id]"> </span>
        </span> -->
        &#10012;
      </div>
      <div >{{row.id}}</div>
      <div >{{row.title}}</div>
      <div >{{row.description}}</div>
      <!-- <div *ngIf="expanded[row.id]"> -->
      <div [@detailExpand]="expanded[row.id] ? 'expanded' : 'collapsed'">
        <div   *ngFor="let childrow of row.comments">
          <div >{{childrow.id}}</div>
          <div > <a href="/view-student" >{{childrow.content}}</a></div>
        </div>
    </div>
    </div>
  </div>
</div>

Component:

@Component({
  selector: 'app-tutorials',
  templateUrl: './tutorials.component.html',
  styleUrls: ['./tutorials.component.css'],
  animations: [
    trigger('detailExpand', [
      state('collapsed', style({ height: '0px', minHeight: '0'})),
      state('expanded', style({height: '*'})),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
    ]),
  ],
})
export class TutorialsComponent implements OnInit{

  constructor(private tutorialsService: TutorialsService) { }

  tutorials: Observable<Tutorials[]> = this.tutorialsService.getAll();
  tutorials2: Observable<any>;
  tutorial : Tutorials = new Tutorials();
  isupdated = false;   

  ngOnInit() {
    this.isupdated=false;
    this.tutorialsService.getAll().subscribe(data =>{
      this.tutorials = data;
      this.rows = data;
      console.log(this.rows);
      //console.log(data);
    })    
    
  }
  expanded: {[key: string]: boolean} = {};
  rows: any[] = [];
  
  isRowClickable(rowIndex: number): boolean {
    //console.log(this.rows[rowIndex].children.length > 0)
    return this.rows[rowIndex].children && this.rows[rowIndex].children.length > 0
  }
  
}

Problem is, when row is expanded, I can click on child and row will collapse. How can I do child still clickable, but not collapsible by clicking? I tried to make some css rules, but its not working

CodePudding user response：

On child row add click event which will trigger your function and also add $event.stopPropagation()