Enhanced the Collapse all or Expand All button by implementing both in the same button and also fix the translation for both

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -85,12 +85,9 @@
 
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
 
-  <div class="m-b-20"  fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+  <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
-    <button mat-raised-button (click)="nestedTreeControl.expandAll()">  <!-- Bug(angular-material): https://github.com/angular/material2/issues/12170 -->
+    <button mat-raised-button (click)="toggleExpandCollapse()">
-      {{"labels.buttons.Expand All" | translate}}
+      {{ (isTreeExpanded ? "labels.buttons.Collapse All" : "labels.buttons.Expand All") | translate }}
-    </button>
-    <button mat-raised-button (click)="nestedTreeControl.collapseAll()">
-      {{"labels.buttons.Collapse All" | translate}}
     </button>
   </div>
 

src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts

@@ -18,6 +18,7 @@ import { GLAccountNode } from './gl-account-node.model';
 import { GlAccountTreeService } from './gl-account-tree.service';
 import { PopoverService } from '../../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
+import { TreeControlService } from 'app/shared/common-logic/tree-control.service';
 
 /**
  * Chart of accounts component.
@@ -43,6 +44,8 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
   nestedTreeDataSource: MatTreeNestedDataSource<GLAccountNode>;
   /** Selected GL Account. */
   glAccount: GLAccountNode;
+  /** Flag to check if tree is expanded or collapsed. */
+  isTreeExpanded: boolean = true;
 
   /** Paginator for chart of accounts table. */
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -69,6 +72,7 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
   constructor(private glAccountTreeService: GlAccountTreeService,
               private route: ActivatedRoute,
               private router: Router,
+              private treeControlService: TreeControlService,
               private configurationWizardService: ConfigurationWizardService,
               private popoverService: PopoverService) {
     this.route.data.subscribe((data: { chartOfAccounts: any }) => {
@@ -177,4 +181,12 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
     this.configurationWizardService.showChartofAccounts = true;
     this.router.navigate(['/accounting']);
   }
+
+  /** 
+   * Expand and Collapse the tree
+  */
+  toggleExpandCollapse() {
+    this.isTreeExpanded = this.treeControlService.toggleExpandCollapse(this.nestedTreeControl, this.isTreeExpanded);
+  }
+
 }

src/app/organization/offices/offices.component.html

@@ -75,11 +75,8 @@
 <div class="container" [hidden]="viewGroup.value !== 'treeView'">
 
   <div class="m-b-20" fxLayout="row" fxLayoutAlign="start" fxLayoutGap="20px">
-    <button mat-raised-button (click)="nestedTreeControl.expandAll()">
+    <button mat-raised-button (click)="toggleExpandCollapse()">
-      {{'Expand All'|translate}}
+      {{ (isTreeExpanded ? "labels.buttons.Collapse All" : "labels.buttons.Expand All") | translate }}
-    </button>
-    <button mat-raised-button (click)="nestedTreeControl.collapseAll()">
-      {{'Collapse All'|translate}}
     </button>
   </div>
 

src/app/organization/offices/offices.component.ts

@@ -16,6 +16,7 @@ import { OfficeNode } from './office-node.model';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { MatTreeNestedDataSource } from '@angular/material/tree';
 import { OfficeTreeService } from './office-tree-service.service';
+import { TreeControlService } from 'app/shared/common-logic/tree-control.service';
 
 /**
  * Offices component.
@@ -43,6 +44,8 @@ export class OfficesComponent implements OnInit, AfterViewInit {
   office: OfficeNode;
   /** Office data tables. */
   dataTablesData: any;
+  /** Flag to check if tree is expanded or collapsed. */
+  isTreeExpanded: boolean = true;
 
   /** Paginator for offices table. */
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@@ -70,6 +73,7 @@ export class OfficesComponent implements OnInit, AfterViewInit {
   constructor(private route: ActivatedRoute,
     private router: Router,
     private officeTreeService: OfficeTreeService,
+    private treeControlService: TreeControlService,
     private configurationWizardService: ConfigurationWizardService,
     private popoverService: PopoverService) {
     this.route.data.subscribe(( data: { offices: any, officeDataTables: any }) => {
@@ -186,4 +190,11 @@ export class OfficesComponent implements OnInit, AfterViewInit {
     this.router.navigate(['/organization']);
   }
 
+  /** 
+   * Expand and Collapse the tree
+  */
+  toggleExpandCollapse() {
+    this.isTreeExpanded = this.treeControlService.toggleExpandCollapse(this.nestedTreeControl, this.isTreeExpanded);
+  }
+
 }

src/app/shared/common-logic/tree-control.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { NestedTreeControl } from '@angular/cdk/tree';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TreeControlService {
+  constructor() { }
+
+  toggleExpandCollapse(nestedTreeControl: NestedTreeControl<any>, isTreeExpanded: boolean) {
+    if (isTreeExpanded) {
+      nestedTreeControl.collapseAll();
+    } else {
+      nestedTreeControl.expandAll();
+    }
+    // Toggle the state
+    return !isTreeExpanded;
+  }
+}