Expand collapse all rows of datatable

prime-table.component.html

<div class="p-grid" style="margin-top:15px; padding:10px;">
<p-table [columns]="cols" [value]="cars" dataKey="vin" [paginator]="true"
[rows]="10" [totalRecords]="cars.length" pageLinkSize="3" (onPage)="onPage($event)"
    (onRowExpand)="onRowExpand()" (onRowCollapse)="onRowCollapse()" 
    [expandedRowKeys]="expandedRows">
  <ng-template pTemplate="header" let-columns>
      <tr>
          <th style="width: 3em">
            <a style="cursor: pointer;font-size: 16px; color:teal;" (click)="expandAll()"><i
              *ngIf="!isExpanded" class="fa fa-plus-circle" aria-hidden="true"></i>
          <i *ngIf="isExpanded" class="fa fa-minus-circle" aria-hidden="true"></i></a>
          </th>
          <th *ngFor="let col of columns">
              {{col.header}}
          </th>
      </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
      <tr>
          <td>
              <a href="#" [pRowToggler]="rowData">
                  <i [ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
              </a>
          </td>
          <td *ngFor="let col of columns">
              {{rowData[col.field]}}
          </td>
      </tr>
  </ng-template>
  <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
      <tr>
          <td [attr.colspan]="columns.length + 1">
              <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                  <div class="ui-g-12 ui-md-3" style="text-align:center">
                      <img [attr.alt]="rowData.brand">
                  </div>
                  <div class="ui-g-12 ui-md-9">
                      <div class="ui-g">
                          <div class="ui-g-12">
                              <b>Vin:</b> {{rowData.vin}}
                          </div>
                          <div class="ui-g-12">
                              <b>Year:</b> {{rowData.year}}
                          </div>
                          <div class="ui-g-12">
                              <b>Brand:</b> {{rowData.brand}}
                          </div>
                          <div class="ui-g-12">
                              <b>Color:</b> {{rowData.color}}
                          </div>
                      </div>
                  </div>
              </div>
          </td>
      </tr>
  </ng-template>
</p-table>
</div>

prime-table.component.ts

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

@Component({
  selector: 'prime-table',
  templateUrl: './prime-table.component.html',
  styleUrls: ['./prime-table.component.scss']
})
export class PrimeTableComponent implements OnInit {
  public cars:any[];
  public cols: any[];
  public isExpanded:boolean = false;
  public rows:number =10;
  public expandedRows = {};
  public temDataLength:number = 0;
  constructor() { }

  ngOnInit() {
    this.cols = [
      { field: 'vin', header: 'Vin' },
      { field: 'year', header: 'Year' },
      { field: 'brand', header: 'Brand' },
      { field: 'color', header: 'Color' }
  ];
  this.cars = CARS;

  this.cars.length < this.rows ? this.temDataLength = this.cars.length : this.temDataLength = this.rows;
  }
  expandAll() {
    if(!this.isExpanded){
      this.cars.forEach(data =>{
        this.expandedRows[data.vin] = 1;
      })
    } else {
      this.expandedRows={};
    }
    this.isExpanded = !this.isExpanded;
  }
  onRowExpand() {
    console.log("row expanded", Object.keys(this.expandedRows).length);
    if(Object.keys(this.expandedRows).length === this.temDataLength){
      this.isExpanded = true;
    }
  }
  onRowCollapse() {
    console.log("row collapsed",Object.keys(this.expandedRows).length);
    if(Object.keys(this.expandedRows).length === 0){
      this.isExpanded = false;
    }
  }
  onPage(event: any) {
    this.temDataLength = this.cars.slice(event.first, event.first + 10).length;
    console.log(this.temDataLength);
    this.isExpanded = false;
    this.expandedRows={};
  }
}
const CARS = [
      {"vin":"a1653d4d","brand":"VW","year":1998,"color":"White","price":10000},
      {"vin":"ddeb9b10","brand":"Mercedes","year":1985,"color":"Green","price":25000},
      {"vin":"d8ebe413","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
      {"vin":"aab227b7","brand":"Audi","year":1970,"color":"Black","price":12000},
      {"vin":"631f7412","brand":"Volvo","year":1992,"color":"Red","price":15500},
      {"vin":"7d2d22b0","brand":"VW","year":1993,"color":"Maroon","price":40000},
      {"vin":"50e900ca","brand":"Fiat","year":1964,"color":"Blue","price":25000},
      {"vin":"4bbcd603","brand":"Renault","year":1983,"color":"Maroon","price":22000},
      {"vin":"70214c7e","brand":"Renault","year":1961,"color":"Black","price":19000},
      {"vin":"ec229a92","brand":"Audi","year":1984,"color":"Brown","price":36000},
      {"vin":"1083ee40","brand":"VW","year":1984,"color":"Silver","price":215000},
      {"vin":"6e0da3ab","brand":"Volvo","year":1987,"color":"Silver","price":32000},
      {"vin":"5aee636b","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
      {"vin":"7cc43997","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
      {"vin":"88ec9f66","brand":"Honda","year":1989,"color":"Maroon","price":36000},
      {"vin":"f5a4a5f5","brand":"BMW","year":1986,"color":"Blue","price":28000},
      {"vin":"15b9a5c9","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
      {"vin":"f7e18d01","brand":"Mercedes","year":1991,"color":"White","price":25000},
      {"vin":"cec593d7","brand":"VW","year":1992,"color":"Blue","price":36000}
  ];