feat: link to GitHub repo. add more versions and icons

- remove tests
- update dependencies
- remove unnecessary code
- clarify titles
- extract top toolbar into a component
- rename `<tabs>` to `<ng1-tabs>`1

Author: Splaktar

angular.json

@@ -10,7 +10,14 @@
       "prefix": "app",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "skipTests": true
+        },
+        "@schematics/angular:service": {
+          "skipTests": true
+        },
+        "@schematics/angular:pipe": {
+          "skipTests": true
         }
       },
       "architect": {

package-lock.json

@@ -2,66 +2,66 @@
   "name": "angularjs-angular-material-hybrid-demo",
   "version": "0.2.1",
   "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "npm run build:templates && ng serve",
+    "build:templates": "gulp templates",
+    "build": "npm run build:templates && ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "deploy": "npm run build:templates && ng deploy",
+    "update": "npm-check -u"
+  },
   "dependencies": {
-    "@angular/animations": "9.1.3",
-    "@angular/cdk": "9.2.1",
-    "@angular/common": "9.1.3",
-    "@angular/compiler": "9.1.3",
-    "@angular/core": "9.1.3",
+    "@angular/animations": "9.1.6",
+    "@angular/cdk": "9.2.3",
+    "@angular/common": "9.1.6",
+    "@angular/compiler": "9.1.6",
+    "@angular/core": "9.1.6",
     "@angular/fire": "^6.0.0",
-    "@angular/forms": "9.1.3",
-    "@angular/material": "9.2.1",
-    "@angular/platform-browser": "9.1.3",
-    "@angular/platform-browser-dynamic": "9.1.3",
-    "@angular/upgrade": "9.1.3",
+    "@angular/forms": "9.1.6",
+    "@angular/material": "9.2.3",
+    "@angular/platform-browser": "9.1.6",
+    "@angular/platform-browser-dynamic": "9.1.6",
+    "@angular/upgrade": "9.1.6",
     "@types/angular": "^1.7.0",
     "@types/angular-material": "^1.1.71",
     "angular": "^1.7.9",
     "angular-animate": "^1.7.9",
     "angular-aria": "^1.7.9",
     "angular-material": "^1.1.22",
     "angular-messages": "^1.7.9",
-    "firebase": "^7.14.2",
+    "firebase": "^7.14.3",
     "rxjs": "^6.5.5",
-    "tslib": "^1.11.1",
+    "tslib": "^1.11.2",
     "zone.js": "~0.10.3"
   },
-  "scripts": {
-    "ng": "ng",
-    "start": "npm run build:templates && ng serve",
-    "build:templates": "gulp templates",
-    "build": "npm run build:templates && ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e",
-    "deploy": "npm run build:templates && ng deploy",
-    "update": "npm-check -u"
-  },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.901.3",
-    "@angular-devkit/build-angular": "~0.901.3",
-    "@angular/cli": "~9.1.3",
-    "@angular/compiler-cli": "~9.1.3",
-    "@angular/language-service": "~9.1.3",
+    "@angular-devkit/architect": "~0.901.5",
+    "@angular-devkit/build-angular": "~0.901.5",
+    "@angular/cli": "~9.1.5",
+    "@angular/compiler-cli": "~9.1.6",
+    "@angular/language-service": "~9.1.6",
     "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.12.37",
+    "@types/node": "^13.13.5",
     "codelyzer": "^5.2.2",
-    "firebase-tools": "^8.1.1",
+    "firebase-tools": "^8.2.0",
     "gulp": "^4.0.2",
     "gulp-angular-templatecache": "^3.0.0",
     "gulp-htmlmin": "^5.0.1",
     "jasmine-core": "^3.5.0",
     "jasmine-spec-reporter": "^5.0.2",
-    "karma": "^5.0.2",
+    "karma": "^5.0.5",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
+    "karma-coverage-istanbul-reporter": "^3.0.2",
     "karma-jasmine": "^3.1.1",
     "karma-jasmine-html-reporter": "^1.5.3",
     "npm-check": "^5.9.2",
     "protractor": "^5.4.4",
-    "ts-node": "^8.9.0",
-    "tslint": "^6.1.1",
+    "ts-node": "^8.10.1",
+    "tslint": "^6.1.2",
     "typescript": "~3.8.3"
   }
 }

package.json

@@ -1,8 +1,6 @@
-<mat-toolbar color="primary" class="mat-elevation-z1">
-  <span>AngularJS/Angular Material Hybrid</span>
-</mat-toolbar>
+<app-top-nav></app-top-nav>
 <!-- Input that came from AngularJS -->
-<h2>{{ name }} Demo</h2>
+<h2>{{ name }} Hybrid</h2>
 <br>
 <mat-accordion>
   <mat-expansion-panel>
@@ -15,7 +13,7 @@ <h2>{{ name }} Demo</h2>
       </mat-panel-description>
     </mat-expansion-panel-header>
     <!-- AngularJS Component that uses templateUrl-->
-    <tabs></tabs>
+    <ng1-tabs></ng1-tabs>
   </mat-expansion-panel>
   <mat-expansion-panel>
     <mat-expansion-panel-header>

src/app/angular/app.component.html

@@ -16,12 +16,15 @@ import {MatIconModule} from '@angular/material/icon';
 import {MatDividerModule} from '@angular/material/divider';
 import {CdkTreeComponent} from './cdk-tree/cdk-tree.component';
 import {CdkTreeModule} from '@angular/cdk/tree';
+import {TopNavComponent} from './top-nav/top-nav.component';
+import {HttpClientModule} from '@angular/common/http';
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     CommonModule,
+    HttpClientModule,
     MatToolbarModule,
     MatProgressSpinnerModule,
     MatExpansionModule,
@@ -37,7 +40,8 @@ import {CdkTreeModule} from '@angular/cdk/tree';
     TabsComponentFacade,
     TabsComponent,
     ButtonsComponent,
-    CdkTreeComponent
+    CdkTreeComponent,
+    TopNavComponent
   ]
 })
 export class MainAngularModule {

src/app/angular/buttons/buttons.component.spec.ts

@@ -0,0 +1,8 @@
+<mat-toolbar color="primary" class="mat-elevation-z1">
+  <span>Angular Upgrade and Angular CLI Demo</span>
+  <span style="flex: auto;"></span>
+  <a mat-icon-button href="https://github.com/Splaktar/angularjs-angular-material-hybrid-demo"
+     target="_blank" rel="noopener">
+    <mat-icon svgIcon="github"></mat-icon>
+  </a>
+</mat-toolbar>