Add opt-in demo

Author: kseamon

src/cdk-experimental/column-resize/resize-strategy.ts

@@ -49,16 +49,16 @@ export class CdkFlexTableResizeStrategy extends ResizeStrategy implements OnDest
   }
 
   applyColumnSize(cssFriendlyColumnName: string, _: HTMLElement, sizeInPx: number): void {
-    let index = this._columnIndexes.get(cssFriendlyColumnName);
-    if (index === undefined) {
-      index = this._indexSequence++;
-      this._columnIndexes.set(cssFriendlyColumnName, index);
-    }
-
     if (!this._styleElement) {
       this._styleElement = this._document.createElement('style');
       this._styleElement.appendChild(this._document.createTextNode(''));
       this._document.head.appendChild(this._styleElement);
+    }
+    
+    let index = this._columnIndexes.get(cssFriendlyColumnName);
+    if (index === undefined) {
+      index = this._indexSequence++;
+      this._columnIndexes.set(cssFriendlyColumnName, index);
     } else {
       (this._styleElement.sheet as CSSStyleSheet).deleteRule(index);
     }

src/dev-app/column-resize/column-resize-demo-module.ts

@@ -17,12 +17,16 @@ import {
 import {
   DefaultEnabledColumnResizeFlexDemoModule
 } from './default-enabled-flex/default-enabled-column-resize-flex-demo-module';
+import {
+  OptInColumnResizeDemoModule
+} from './opt-in/opt-in-column-resize-demo-module';
 
 @NgModule({
   imports: [
     MatExpansionModule,
     DefaultEnabledColumnResizeDemoModule,
     DefaultEnabledColumnResizeFlexDemoModule,
+    OptInColumnResizeDemoModule,
     RouterModule.forChild([{path: '', component: ColumnResizeHome}]),
   ],
   declarations: [ColumnResizeHome],

src/dev-app/column-resize/column-resize-home.html

@@ -17,3 +17,13 @@
 
   <default-enabled-column-resize-flex-demo></default-enabled-column-resize-flex-demo>
 </mat-expansion-panel>
+
+<mat-expansion-panel>
+  <mat-expansion-panel-header>
+    <mat-panel-title>
+      Opt-in column resize for MatTable
+    </mat-panel-title>
+  </mat-expansion-panel-header>
+
+  <opt-in-column-resize-demo></opt-in-column-resize-demo>
+</mat-expansion-panel>

src/dev-app/column-resize/opt-in/opt-in-column-resize-demo-module.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MatTableModule} from '@angular/material/table';
+import {MatColumnResizeModule} from '@angular/material-experimental/column-resize';
+
+import {OptInColumnResizeDemo} from './opt-in-column-resize-demo';
+
+@NgModule({
+  imports: [
+    MatColumnResizeModule,
+    MatTableModule,
+  ],
+  declarations: [OptInColumnResizeDemo],
+  exports: [OptInColumnResizeDemo],
+})
+export class OptInColumnResizeDemoModule {
+}

src/dev-app/column-resize/opt-in/opt-in-column-resize-demo.html

@@ -0,0 +1,28 @@
+<table mat-table columnResize [dataSource]="dataSource" class="mat-elevation-z8 example-table">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef resizable> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef resizable> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column (not resizable) -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight (Not resizable) </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef resizable> 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>

src/dev-app/column-resize/opt-in/opt-in-column-resize-demo.ts

@@ -0,0 +1,45 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+  {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
+  {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
+  {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
+  {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
+  {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
+  {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
+  {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
+  {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
+  {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
+  {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
+];
+
+/**
+ * @title Basic use of `<table mat-table>`
+ */
+@Component({
+  moduleId: module.id,
+  selector: 'opt-in-column-resize-demo',
+  templateUrl: 'opt-in-column-resize-demo.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class OptInColumnResizeDemo {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}