Upgrade to Angular 9 - fix issues #45 and #36

.eslintrc.json

@@ -0,0 +1,110 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "/dist/**/*.*",
+    "/doc/**/*.*",
+    "/resources/**/*.*",
+    "/scripts/**/*.*",
+    "/www/**/*.*",
+    "/src/**/*.test*.ts",
+    "index.html"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "eslint:recommended",
+        "plugin:prettier/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:@angular-eslint/recommended",
+        // This is required if you use inline templates in Components
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "prettier/prettier": "off",
+        "@angular-eslint/component-class-suffix": "off",
+        "@angular-eslint/no-output-rename": "off",
+        "@angular-eslint/no-output-on-prefix": "warn",
+        "@typescript-eslint/consistent-type-assertions": "off",
+        "@typescript-eslint/consistent-type-definitions": "error",
+        "@typescript-eslint/naming-convention": "off",
+        "@typescript-eslint/dot-notation": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-types": "off",
+        "prefer-arrow/prefer-arrow-functions": "off",
+        "@typescript-eslint/explicit-member-accessibility": [
+          "off",
+          {
+            "accessibility": "explicit"
+          }
+        ],
+        "@typescript-eslint/member-ordering": [
+          "off",
+          {
+            "default": {
+              "memberTypes": [
+                // Index signature
+                "signature",
+
+                // Getters and Setters at the same rank
+                ["get", "set", "field"],
+
+                // Static initialization
+                "static-initialization",
+
+                // Constructors
+                "constructor",
+
+                // Methods
+                "method"
+              ]
+            }
+          }
+        ],
+        "brace-style": [
+          "off",
+          "off"
+        ],
+        "curly": "off",
+        "dot-notation": "off",
+        "id-blacklist": "off",
+        "id-match": "off",
+        "no-empty-function": "off",
+        "@typescript-eslint/no-shadow": [
+          "off",
+          {
+            "hoist": "all"
+          }
+        ],
+        "no-trailing-spaces": "off",
+        "no-undef-init": "off",
+        "no-underscore-dangle": "off",
+        "no-unused-expressions": "error",
+        "no-use-before-define": "off",
+        "radix": "off",
+        "semi": "error",
+        "no-console": "off",
+        "max-len": "off",
+        "no-throw-literal": "off"
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended",
+        "plugin:prettier/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.gitignore

@@ -27,6 +27,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -42,3 +43,8 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+/.local/
+
+# npm/yarn
+yarn.lock
+package-lock.json

.prettierignore

@@ -0,0 +1,8 @@
+.local
+.husky
+.angular
+dist
+doc
+node_modules
+scripts
+www

.prettierrc.json

@@ -0,0 +1,17 @@
+{
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 150,
+  "tabWidth": 2,
+  "overrides": [
+    {
+      "files": "src/app/**/*.html",
+      "options": {
+        "parser": "angular",
+        "htmlWhitespaceSensitivity": "ignore",
+        "printWidth": 120
+      }
+    }
+  ]
+}

README.md

@@ -1,29 +1,35 @@
-# Angular4 material table (angular4+)
+# Angular material table (Angular 10+)
+
+**Forked from [angular4-material-table](https://github.com/irossimoline/angular4-material-table)**
 
 This project extends `@angular/cdk` data-table, also used in `@angular/material` table.
 
 It extends `@angular/cdk/collections` DataSource in order to include a row structure, allowing row creation, inline row edition, deletion and validation.
 
 Supported angular versions: 
-- Angular 4 (v0.1.8)
-- Angular 5 (v0.2.0)
-- Angular 6 (v0.6.0)
-- Angular 7 (v0.7.0)
-- Angular 8 (v0.8.0)
-
-![angular4-material-table](https://i.imgur.com/ufilXlv.gif)
+- Angular 17 (v17.x)
+  - 17.3 (v17.3.x)
+  - 17.2 (v17.2.x)
+- Angular 16 (v0.16.0)
+- Angular 15 (v0.15.0)
+- Angular 14 (v0.14.0)
+- Angular 11 (v0.11.0 and v0.12.0)
+- Angular 10 (v0.10.0)
+- Angular <= 9: Please use [angular4-material-table](https://github.com/irossimoline/angular4-material-table)
+
+![@e-is/ngx-material-table](https://i.imgur.com/ufilXlv.gif)
 
 ## Installation
 
 To install the package run:
 
-`npm install angular4-material-table`
+`npm install @e-is/ngx-material-table`
 
 ## Example
 
-Example of using `angular4-material-table`:
+Example of using `@e-is/ngx-material-table`:
 
-![angular4-material-table](https://i.imgur.com/vncajJG.png)
+![@e-is/ngx-material-table](https://i.imgur.com/vncajJG.png)
 
 ![Other example](https://i.imgur.com/5ed814s.png)
 
@@ -44,7 +50,7 @@ class TableElement<T> {
   id: number;
   editing: boolean;
   currentData?: T;
-  originalData: T;
+  originalData?: T;
   source: TableDataSource<T>;
   validator: FormGroup; // Used only in reactive forms.
 
@@ -71,23 +77,23 @@ class TableDataSource<T> {
 
   createNew(): void;
 
-  getRow(id: number): TableElement<T>;
+  getRow(id: number): AsyncTableElement<T>;
 }
 ```
 
 ### Angular4 material table example
 
-Angular 4 material table use example:
-![Example of angular4-material-table use](https://i.imgur.com/ath56FU.png)
+Angular material table use example:
+![Example of @e-is/ngx-material-table use](https://i.imgur.com/ath56FU.png)
 
 [See this package in action](https://stackblitz.com/edit/angular-tj9f6y)
 
 #### Optional libraries
 Optional libraries used in the example:
 ```
-"@angular/material": "2.0.0-beta.12",
-"@angular/forms": "4.4.4", // <- For inline validation
-"font-awesome": "4.7.0"
+"@angular/material": "16.2.11",
+"@angular/forms": 16.2.12", // <- For inline validation
+"material-design-icons": "^3.0.1"
 ```
 
 #### person-list-reactive-forms.component.html
@@ -98,16 +104,16 @@ Optional libraries used in the example:
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
     <mat-cell *matCellDef="let row">
-      <mat-form-field floatPlaceholder="{{ row.editing ? 'float' : 'never'}}">
-        <input [formControl]="row.validator.controls['name']" placeholder="Name" matInput>
+      <mat-form-field [floatLabel]="row.editing ? 'auto' : 'never'">
+        <input matInput [formControl]="row.validator.controls['name']" placeholder="Name">
       </mat-form-field>
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="age">
     <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
     <mat-cell *matCellDef="let row">
-      <mat-form-field floatPlaceholder="{{ row.editing ? 'float' : 'never'}}">
-        <input [formControl]="row.validator.controls['age']" type="number" placeholder="Age" matInput>
+      <mat-form-field [floatLabel]="row.editing ? 'auto' : 'never'">
+        <input matInput [formControl]="row.validator.controls['age']" type="number" placeholder="Age">
       </mat-form-field>
     </mat-cell>
   </ng-container>
@@ -116,15 +122,16 @@ Optional libraries used in the example:
       <button mat-icon-button color="accent" (click)="dataSource.createNew()"><i class="fa fa-plus mat-icon"></i></button>
     </mat-header-cell>
     <mat-cell *matCellDef="let row">
-      <button *ngIf="!row.editing" mat-icon-button color="primary" focusable="false" (click)="row.startEdit()">
-            <i class="fa fa-pencil mat-icon"></i>
-          </button>
-      <button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate()">
-            <i class="fa fa-check mat-icon"></i>
-          </button>
-      <button mat-icon-button color="primary" focusable="false" (click)="row.cancelOrDelete()">
-            <i class="fa fa-times mat-icon"></i>
-          </button>
+      <button *ngIf="!row.editing" mat-icon-button color="primary" (click)="row.startEdit()">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button *ngIf="row.editing" mat-icon-button color="primary" (click)="row.confirmEditCreate()">
+        <mat-icon>done</mat-icon>
+      </button>
+      <button mat-icon-button color="primary" (click)="row.cancelOrDelete()">
+        <mat-icon *ngIf="row.editing">undo</mat-icon>
+        <mat-icon *ngIf="!row.editing">delete</mat-icon>
+      </button>
     </mat-cell>
   </ng-container>
 
@@ -141,15 +148,15 @@ Optional libraries used in the example:
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
     <mat-cell *matCellDef="let row">
-      <mat-form-field floatPlaceholder="{{ row.editing ? 'float' : 'never'}}">
+      <mat-form-field [floatLabel]="row.editing ? 'float' : 'never'">
         <input [(ngModel)]="row.currentData.name" placeholder="Name" [disabled]="!row.editing" matInput>
       </mat-form-field>
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="age">
     <mat-header-cell *matHeaderCellDef> Age </mat-header-cell>
     <mat-cell *matCellDef="let row">
-      <mat-form-field floatPlaceholder="{{ row.editing ? 'float' : 'never'}}">
+      <mat-form-field [floatLabel]="row.editing ? 'float' : 'never'">
         <input type="number" [(ngModel)]="row.currentData.age" placeholder="Age"  [disabled]="!row.editing" matInput>
       </mat-form-field>
     </mat-cell>
@@ -159,15 +166,16 @@ Optional libraries used in the example:
       <button mat-icon-button color="accent" (click)="dataSource.createNew()"><i class="fa fa-plus mat-icon"></i></button>
     </mat-header-cell>
     <mat-cell *matCellDef="let row">
-      <button *ngIf="!row.editing" mat-icon-button color="primary" focusable="false" (click)="row.startEdit()">
-            <i class="fa fa-pencil mat-icon"></i>
-          </button>
-      <button *ngIf="row.editing" mat-icon-button color="primary" focusable="false" (click)="row.confirmEditCreate()">
-            <i class="fa fa-check mat-icon"></i>
-          </button>
-      <button mat-icon-button color="primary" focusable="false" (click)="row.cancelOrDelete()">
-            <i class="fa fa-times mat-icon"></i>
-          </button>
+      <button *ngIf="!row.editing" mat-icon-button color="primary" (click)="row.startEdit()">
+        <mat-icon>edit</mat-icon>
+      </button>
+      <button *ngIf="row.editing" mat-icon-button color="primary" (click)="row.confirmEditCreate()">
+        <mat-icon>done</mat-icon>
+      </button>
+      <button mat-icon-button color="primary" (click)="row.cancelOrDelete()">
+        <mat-icon *ngIf="row.editing">undo</mat-icon>
+        <mat-icon *ngIf="!row.editing">delete</mat-icon>
+      </button>
     </mat-cell>
   </ng-container>
 
@@ -226,5 +234,8 @@ class PersonValidatorService implements ValidatorService {
 Any suggestion or contribution will be appreciated.
 
 
+## Change log
+
+See [Change log](./doc/changelog.md)