refactor: refactoring, clean up, and revert to Angular Material 8.1.4

README.md

@@ -2,6 +2,9 @@
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.3.8.
 
+This repo is just a reproduction of the issue here:
+https://github.com/angular/components/issues/17121
+
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

angular.json

@@ -17,7 +17,7 @@
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.app.json",
+                        "tsConfig": "tsconfig.app.json",
                         "assets": [
                             "src/favicon.ico",
                             "src/assets"
@@ -74,10 +74,10 @@
                     "options": {
                         "main": "src/test.ts",
                         "polyfills": "src/polyfills.ts",
-                        "tsConfig": "src/tsconfig.spec.json",
+                        "tsConfig": "tsconfig.spec.json",
                         "karmaConfig": "src/karma.conf.js",
                         "styles": [
-                            "src/styles.css",
+                            "src/styles.css"
                         ],
                         "scripts": [],
                         "assets": [
@@ -90,8 +90,8 @@
                     "builder": "@angular-devkit/build-angular:tslint",
                     "options": {
                         "tsConfig": [
-                            "src/tsconfig.app.json",
-                            "src/tsconfig.spec.json"
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json"
                         ],
                         "exclude": [
                             "**/node_modules/**"

package.json

@@ -12,13 +12,13 @@
     "private": true,
     "dependencies": {
         "@angular/animations": "^8.2.8",
-        "@angular/cdk": "^8.2.1",
+        "@angular/cdk": "^8.1.4",
         "@angular/common": "~8.2.8",
         "@angular/compiler": "~8.2.8",
         "@angular/core": "~8.2.8",
         "@angular/forms": "~8.2.8",
-        "@angular/material": "^8.2.1",
-        "@angular/material-moment-adapter": "^8.2.1",
+        "@angular/material": "^8.1.4",
+        "@angular/material-moment-adapter": "^8.1.4",
         "@angular/platform-browser": "~8.2.8",
         "@angular/platform-browser-dynamic": "~8.2.8",
         "@angular/router": "~8.2.8",

src/app/app-routing.module.ts

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MATPageComponent } from './matdemo/matpage/matpage.component';
+import { PageComponent } from './demo/page/page.component';
 
 const routes: Routes = [
-  { path: '**', component: MATPageComponent }
+  { path: '**', component: PageComponent }
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
-import { Router, RouterEvent, NavigationStart, NavigationEnd } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  constructor(router: Router) {
-  }
+  constructor() {}
 }

src/app/app.module.ts

@@ -4,7 +4,7 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { MatdemoModule } from './matdemo/matdemo.module';
+import { DemoModule } from './demo/demo.module';
 
 import { Router } from '@angular/router';
 
@@ -13,7 +13,8 @@ import { Router } from '@angular/router';
     AppComponent
   ],
   imports: [
-    BrowserModule, BrowserAnimationsModule, MatdemoModule, AppRoutingModule // This should be last paramater
+    BrowserModule, BrowserAnimationsModule, DemoModule,
+    AppRoutingModule // This should be last parameter
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/matdemo/matdemo-routing.module.ts → src/app/demo/demo-routing.module.ts

@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { MATPageComponent } from './matpage/matpage.component';
+import { PageComponent } from './page/page.component';
 
 const routes: Routes = [
-  { path: '**', component: MATPageComponent },
+  { path: '**', component: PageComponent },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class MatdemoRoutingModule { }
+export class DemoRoutingModule { }

src/app/demo/demo.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+
+import { DemoRoutingModule } from './demo-routing.module';
+import { SharedModule } from '../lib/shared.module';
+
+import { PageComponent } from './page/page.component';
+
+
+@NgModule({
+  declarations: [PageComponent],
+  imports: [
+    DemoRoutingModule, SharedModule
+  ]
+})
+export class DemoModule {}

src/app/matdemo/matpage/matpage.component.spec.ts → src/app/demo/page/page.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MATPageComponent } from './matpage.component';
+import { PageComponent } from './page.component';
 
 describe('matPageComponent', () => {
-  let component: MATPageComponent;
-  let fixture: ComponentFixture<MATPageComponent>;
+  let component: PageComponent;
+  let fixture: ComponentFixture<PageComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MATPageComponent ]
+      declarations: [ PageComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MATPageComponent);
+    fixture = TestBed.createComponent(PageComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/demo/page/page.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page',
+  templateUrl: './page.component.html',
+  styleUrls: ['./page.component.css']
+})
+export class PageComponent {
+
+  constructor() {}
+}

src/app/matlibrary/matshared.module.ts → src/app/lib/shared.module.ts

@@ -7,19 +7,26 @@ import { CommonModule } from '@angular/common';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
 
 // Components
-import { MatTabComponent } from './matcomponent-ts/mattab';
+import { TabsComponent } from './tabs/tabs.component';
 
 @NgModule({
   declarations: [
-    MatTabComponent
+    TabsComponent
   ],
   imports: [
-    FormsModule, ReactiveFormsModule, HttpClientModule, CommonModule, MatFormFieldModule, MatCheckboxModule, MatTabsModule
+    FormsModule, ReactiveFormsModule, HttpClientModule, CommonModule, MatFormFieldModule,
+    MatCheckboxModule, MatTabsModule, MatButtonModule, MatInputModule
+  ],
+  exports: [
+    FormsModule, ReactiveFormsModule, HttpClientModule, CommonModule, MatFormFieldModule,
+    MatCheckboxModule, MatTabsModule, MatButtonModule, MatInputModule
   ],
   providers: [],
   bootstrap: [],
-  entryComponents: [MatTabComponent]
+  entryComponents: [TabsComponent]
 })
-export class MatSharedModule { }
+export class SharedModule {}

src/app/lib/tabs/tabs.component.ts

@@ -0,0 +1,59 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-mat',
+  template: `
+    <form>
+      <div class="sectionTabDiv">
+        <div>
+          <span class="example-input-label"> Selected tab index: </span>
+          <mat-form-field>
+            <input matInput type="number" [formControl]="selected">
+          </mat-form-field>
+        </div>
+
+        <div>
+          <button mat-raised-button
+                  class="example-add-tab-button"
+                  (click)="addTab(selectAfterAdding.checked)">
+            Add new tab
+          </button>
+          <mat-checkbox #selectAfterAdding> Select tab after adding</mat-checkbox>
+        </div>
+        <!--[selectedIndex]="selected.value"-->
+        <mat-tab-group [selectedIndex]="1"
+                       (selectedIndexChange)="selected.setValue($event)">
+          <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
+            Contents for {{tab}} tab
+
+            <button mat-raised-button
+                    class="example-delete-tab-button"
+                    [disabled]="tabs.length === 1"
+                    (click)="removeTab(index)">
+              Delete Tab
+            </button>
+          </mat-tab>
+        </mat-tab-group>
+      </div>
+    </form>`,
+  styles: [``]
+})
+export class TabsComponent {
+  tabs = ['First', 'Second', 'Third'];
+  selected = new FormControl(0);
+
+  constructor() {}
+
+  addTab(selectAfterAdding: boolean) {
+    this.tabs.push('New');
+
+    if (selectAfterAdding) {
+      this.selected.setValue(this.tabs.length - 1);
+    }
+  }
+
+  removeTab(index: number) {
+    this.tabs.splice(index, 1);
+  }
+}

src/environments/environment.ts

@@ -13,4 +13,4 @@ export const environment = {
  * This import should be commented out in production mode because it will have a negative impact
  * on performance if an error is thrown.
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+import 'zone.js/dist/zone-error';  // Included with Angular CLI.