From 8b143667637ccc96aff578173f628965c66bc942 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 10 Jul 2018 12:26:29 +0300
Subject: [PATCH] (Angular Material Examples) Updated the examples

---
 .../cdk-table-basic-example.html              |  8 +-
 .../cdk-table-basic-example.ts                |  2 +-
 .../table-basic/table-basic-example.html      | 50 ++++++------
 .../table-filtering-example.html              | 52 ++++++------
 .../table-footer-row-example.html             | 12 +--
 .../table-http/table-http-example.html        | 50 ++++++------
 .../table-overview-example.html               |  6 +-
 .../table-selection-example.html              | 80 +++++++++----------
 .../table-sorting/table-sorting-example.html  | 46 +++++------
 .../tooltip-position-example.html             |  4 +-
 .../tree-dynamic/tree-dynamic-example.ts      |  5 +-
 11 files changed, 159 insertions(+), 156 deletions(-)

diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
index 9c411146..2664fe00 100755
--- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
+++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.html
@@ -3,19 +3,19 @@
   <ng-container cdkColumnDef="position">
     <th cdk-header-cell *cdkHeaderCellDef> No. </th>
     <td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  </ng-container>
 
-    <!-- Name Column -->
+  <!-- Name Column -->
   <ng-container cdkColumnDef="name">
     <th cdk-header-cell *cdkHeaderCellDef> Name </th>
     <td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  </ng-container>
 
   <!-- Weight Column -->
   <ng-container cdkColumnDef="weight">
     <th cdk-header-cell *cdkHeaderCellDef> Weight </th>
     <td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  </ng-container>
 
   <!-- Symbol Column -->
   <ng-container cdkColumnDef="symbol">
diff --git a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
index 344e04ce..57ca6060 100755
--- a/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
+++ b/src/assets/angular-material-examples/cdk-table-basic/cdk-table-basic-example.ts
@@ -20,7 +20,7 @@ export interface PeriodicElement {
   position: number;
   weight: number;
   symbol: string;
-  }
+}
 
 const ELEMENT_DATA: PeriodicElement[] = [
   {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
diff --git a/src/assets/angular-material-examples/table-basic/table-basic-example.html b/src/assets/angular-material-examples/table-basic/table-basic-example.html
index accb8a7c..054cb0c6 100755
--- a/src/assets/angular-material-examples/table-basic/table-basic-example.html
+++ b/src/assets/angular-material-examples/table-basic/table-basic-example.html
@@ -1,33 +1,33 @@
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-    <!--- Note that these columns can be defined in any order.
-          The actual rendered columns are set as a property on the row definition" -->
+  <!--- Note that these columns can be defined in any order.
+        The actual rendered columns are set as a property on the row definition" -->
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
 
diff --git a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html
index 365537f9..f0e4e00a 100755
--- a/src/assets/angular-material-examples/table-filtering/table-filtering-example.html
+++ b/src/assets/angular-material-examples/table-filtering/table-filtering-example.html
@@ -1,33 +1,33 @@
-    <mat-form-field>
-      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-    </mat-form-field>
+<mat-form-field>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+</mat-form-field>
 
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
index bbf9c2c3..c5faed4e 100755
--- a/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
+++ b/src/assets/angular-material-examples/table-footer-row/table-footer-row-example.html
@@ -1,17 +1,17 @@
 <table mat-table [dataSource]="transactions" class="mat-elevation-z8">
-    <!-- Item Column -->
-    <ng-container matColumnDef="item">
+  <!-- Item Column -->
+  <ng-container matColumnDef="item">
     <th mat-header-cell *matHeaderCellDef> Item </th>
     <td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
     <td mat-footer-cell *matFooterCellDef> Total </td>
-    </ng-container>
+  </ng-container>
 
-    <!-- Cost Column -->
-    <ng-container matColumnDef="cost">
+  <!-- Cost Column -->
+  <ng-container matColumnDef="cost">
     <th mat-header-cell *matHeaderCellDef> Cost </th>
     <td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
     <td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
-    </ng-container>
+  </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
diff --git a/src/assets/angular-material-examples/table-http/table-http-example.html b/src/assets/angular-material-examples/table-http/table-http-example.html
index ad80ff5d..49992857 100755
--- a/src/assets/angular-material-examples/table-http/table-http-example.html
+++ b/src/assets/angular-material-examples/table-http/table-http-example.html
@@ -10,36 +10,36 @@
   <div class="example-table-container">
 
     <table mat-table [dataSource]="data" class="example-table"
-             matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
-    <!-- Number Column -->
-    <ng-container matColumnDef="number">
-      <th mat-header-cell *matHeaderCellDef>#</th>
-      <td mat-cell *matCellDef="let row">{{ row.number }}</td>
-    </ng-container>
+           matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
+      <!-- Number Column -->
+      <ng-container matColumnDef="number">
+        <th mat-header-cell *matHeaderCellDef>#</th>
+        <td mat-cell *matCellDef="let row">{{ row.number }}</td>
+      </ng-container>
 
-    <!-- Title Column -->
-    <ng-container matColumnDef="title">
-      <th mat-header-cell *matHeaderCellDef>Title</th>
-      <td mat-cell *matCellDef="let row">{{ row.title }}</td>
-    </ng-container>
+      <!-- Title Column -->
+      <ng-container matColumnDef="title">
+        <th mat-header-cell *matHeaderCellDef>Title</th>
+        <td mat-cell *matCellDef="let row">{{ row.title }}</td>
+      </ng-container>
 
-    <!-- State Column -->
-    <ng-container matColumnDef="state">
-      <th mat-header-cell *matHeaderCellDef>State</th>
-      <td mat-cell *matCellDef="let row">{{ row.state }}</td>
-    </ng-container>
+      <!-- State Column -->
+      <ng-container matColumnDef="state">
+        <th mat-header-cell *matHeaderCellDef>State</th>
+        <td mat-cell *matCellDef="let row">{{ row.state }}</td>
+      </ng-container>
 
-    <!-- Created Column -->
-    <ng-container matColumnDef="created">
+      <!-- Created Column -->
+      <ng-container matColumnDef="created">
         <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
-        Created
-      </th>
-      <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
-    </ng-container>
+          Created
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
+      </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
   </div>
 
   <mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
diff --git a/src/assets/angular-material-examples/table-overview/table-overview-example.html b/src/assets/angular-material-examples/table-overview/table-overview-example.html
index e36a8657..20620a8e 100755
--- a/src/assets/angular-material-examples/table-overview/table-overview-example.html
+++ b/src/assets/angular-material-examples/table-overview/table-overview-example.html
@@ -1,6 +1,6 @@
-  <mat-form-field>
-    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
-  </mat-form-field>
+<mat-form-field>
+  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+</mat-form-field>
 
 <div class="mat-elevation-z8">
   <table mat-table [dataSource]="dataSource" matSort>
diff --git a/src/assets/angular-material-examples/table-selection/table-selection-example.html b/src/assets/angular-material-examples/table-selection/table-selection-example.html
index c8af8133..a22d5626 100755
--- a/src/assets/angular-material-examples/table-selection/table-selection-example.html
+++ b/src/assets/angular-material-examples/table-selection/table-selection-example.html
@@ -1,47 +1,47 @@
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-    <!-- Checkbox Column -->
-    <ng-container matColumnDef="select">
-      <th mat-header-cell *matHeaderCellDef>
-        <mat-checkbox (change)="$event ? masterToggle() : null"
-                      [checked]="selection.hasValue() && isAllSelected()"
-                      [indeterminate]="selection.hasValue() && !isAllSelected()">
-        </mat-checkbox>
-      </th>
-      <td mat-cell *matCellDef="let row">
-        <mat-checkbox (click)="$event.stopPropagation()"
-                      (change)="$event ? selection.toggle(row) : null"
-                      [checked]="selection.isSelected(row)">
-        </mat-checkbox>
-      </td>
-    </ng-container>
+  <!-- Checkbox Column -->
+  <ng-container matColumnDef="select">
+    <th mat-header-cell *matHeaderCellDef>
+      <mat-checkbox (change)="$event ? masterToggle() : null"
+                    [checked]="selection.hasValue() && isAllSelected()"
+                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+      </mat-checkbox>
+    </th>
+    <td mat-cell *matCellDef="let row">
+      <mat-checkbox (click)="$event.stopPropagation()"
+                    (change)="$event ? selection.toggle(row) : null"
+                    [checked]="selection.isSelected(row)">
+      </mat-checkbox>
+    </td>
+  </ng-container>
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"
-             (click)="selection.toggle(row)">
-    </tr>
-  </table>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"
+      (click)="selection.toggle(row)">
+  </tr>
+</table>
diff --git a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
index 30548862..977bed07 100755
--- a/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
+++ b/src/assets/angular-material-examples/table-sorting/table-sorting-example.html
@@ -1,29 +1,29 @@
 <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="position">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
-      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-    </ng-container>
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="name">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-    </ng-container>
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="weight">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
-      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-    </ng-container>
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
 
-    <!-- Symbol Column -->
-    <ng-container matColumnDef="symbol">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
-      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-    </ng-container>
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-  </table>
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
diff --git a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
index 42066b30..f4b76551 100755
--- a/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
+++ b/src/assets/angular-material-examples/tooltip-position/tooltip-position-example.html
@@ -3,8 +3,8 @@
     <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
       {{ positionOption }}
     </mat-option>
-    </mat-select>
-  </mat-form-field>
+  </mat-select>
+</mat-form-field>
 
 <button mat-raised-button
         matTooltip="Info about the action"
diff --git a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
index e8dba37e..7f9b4052 100755
--- a/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
+++ b/src/assets/angular-material-examples/tree-dynamic/tree-dynamic-example.ts
@@ -100,7 +100,10 @@ export class DynamicDataSource {
           new DynamicFlatNode(name, node.level + 1, this.database.isExpandable(name)));
         this.data.splice(index + 1, 0, ...nodes);
       } else {
-        this.data.splice(index + 1, children.length);
+        let count = 0;
+        for (let i = index + 1; i < this.data.length
+          && this.data[i].level > node.level; i++, count++) {}
+        this.data.splice(index + 1, count);
       }
 
       // notify the change