Split up app module into dashboard module, app-material module and app module

src/app/app-material.module.ts

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  MatButtonModule, MatCardModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule,
+  MatInputModule,
+  MatNativeDateModule, MatSelectModule, MatSnackBarModule,
+  MatToolbarModule
+} from '@angular/material';
+import {FlexLayoutModule} from '@angular/flex-layout';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSnackBarModule,
+    MatSelectModule,
+  ],
+  exports: [
+    FlexLayoutModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSnackBarModule,
+    MatSelectModule,
+  ],
+})
+export class AppMaterialModule { }

src/app/app-routing-module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { Router, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 import { NotFoundComponent } from './not-found/not-found.component';
 import {DashboardComponent} from './dashboard/dashboard.component';

src/app/app.module.ts

@@ -1,73 +1,32 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ChartsModule} from 'ng2-charts';
-import {HttpClientModule} from '@angular/common/http';
-import {DatePipe} from '@angular/common';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { FooterComponent } from './menu/footer/footer.component';
 import { HeaderComponent } from './menu/header/header.component';
-import { DashboardComponent } from './dashboard/dashboard.component';
-import { WelcomeComponent } from './dashboard/welcome/welcome.component';
-import { FormComponent } from './dashboard/form/form.component';
-import { MetricComponent } from './dashboard/metric/metric.component';
-import { PublicChartsComponent } from './dashboard/charts/public-charts/public-charts.component';
-import { PrivateChartsComponent } from './dashboard/charts/private-charts/private-charts.component';
-import { BarchartComponent } from './dashboard/charts/barchart/barchart.component';
-import { LinechartComponent } from './dashboard/charts/linechart/linechart.component';
 import { NotFoundComponent } from './not-found/not-found.component';
 import { AppRoutingModule } from './app-routing-module';
-
-import {
-  MatButtonModule, MatIconModule, MatToolbarModule, MatCardModule, MatCheckboxModule,
-  MatDatepickerModule, MatFormFieldModule, MatNativeDateModule, MatInputModule,
-  MatSnackBarModule, MatSelectModule,
-} from '@angular/material';
 import { ImpressumComponent } from './impressum/impressum.component';
+import { AppMaterialModule } from './app-material.module';
+import { DashboardModule } from './dashboard/dashboard.module';
 
 @NgModule({
   declarations: [
     AppComponent,
-    FooterComponent,
     HeaderComponent,
-    DashboardComponent,
-    WelcomeComponent,
-    FormComponent,
-    MetricComponent,
-    PublicChartsComponent,
-    PrivateChartsComponent,
-    BarchartComponent,
-    LinechartComponent,
+    FooterComponent,
     NotFoundComponent,
     ImpressumComponent,
   ],
   imports: [
     BrowserModule,
-    FormsModule,
-    ReactiveFormsModule,
     BrowserAnimationsModule,
-    ChartsModule,
-    HttpClientModule,
-    FlexLayoutModule,
+    AppMaterialModule,
+    DashboardModule,
     AppRoutingModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-    MatCardModule,
-    MatCheckboxModule,
-    MatDatepickerModule,
-    MatNativeDateModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSnackBarModule,
-    MatSelectModule,
+
   ],
-  providers: [HttpClientModule, DatePipe],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AppModule { }

src/app/dashboard/dashboard.component.html

@@ -28,11 +28,11 @@
     <span class="mat-h1">Private</span>
     <br>
     <div *ngIf="timeBasedPrivateStatistics">
-    <app-private-charts [currentPrivateData]="currentPrivateStatistics" [privateData]="timeBasedPrivateStatistics"></app-private-charts>
-  </div>
-  <div *ngIf="!timeBasedPrivateStatistics">
-    <app-private-charts [currentPrivateData]="currentPrivateStatistics"></app-private-charts>
-  </div>
+      <app-private-charts [currentPrivateData]="currentPrivateStatistics" [privateData]="timeBasedPrivateStatistics"></app-private-charts>
+    </div>
+    <div *ngIf="!timeBasedPrivateStatistics">
+      <app-private-charts [currentPrivateData]="currentPrivateStatistics"></app-private-charts>
+    </div>
   </div>
 </div>
 <div  class ="margin" *ngIf="(publicCheck || privateCheck) && (timeBasedPrivateStatistics || timeBasedPublicStatistics)">
@@ -43,4 +43,3 @@
     Update Data
   </button>
 </div>
-

src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import {CommonModule, DatePipe} from '@angular/common';
+import {WelcomeComponent} from './welcome/welcome.component';
+import {AppMaterialModule} from '../app-material.module';
+import {DashboardComponent} from './dashboard.component';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormComponent} from './form/form.component';
+import {MetricComponent} from './metric/metric.component';
+import {PublicChartsComponent} from './charts/public-charts/public-charts.component';
+import {PrivateChartsComponent} from './charts/private-charts/private-charts.component';
+import {BarchartComponent} from './charts/barchart/barchart.component';
+import {LinechartComponent} from './charts/linechart/linechart.component';
+import {ChartsModule} from 'ng2-charts';
+import {HttpClientModule} from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    AppMaterialModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ChartsModule,
+    HttpClientModule,
+
+  ],
+  declarations: [
+    DashboardComponent,
+    WelcomeComponent,
+    FormComponent,
+    MetricComponent,
+    PublicChartsComponent,
+    PrivateChartsComponent,
+    BarchartComponent,
+    LinechartComponent
+  ],
+  providers: [HttpClientModule, DatePipe],
+
+})
+export class DashboardModule { }

src/app/dashboard/form/form.component.html

@@ -3,7 +3,7 @@
       Choose Blockchain
     </mat-card-title>
     <mat-card-content>
-      <form name="select">
+      <form name="select" #form="ngForm" (ngSubmit)="emitEvent()">
         <h2 class="mat-h3">Define Network Type</h2>
         <p>
           <mat-checkbox class="margin" [(ngModel)]="publicChecked" [ngModelOptions]="{standalone: true}" ngDefaultControl>Public</mat-checkbox>
@@ -51,7 +51,7 @@ <h2 class="mat-h3">Define Time Span</h2>
               </mat-form-field>
         </p>
         <mat-card-actions>
-          <button mat-raised-button type="submit" (click)="emitEvent()">Show Data
+          <button mat-raised-button type="submit" >Show Data
             <mat-icon>
               send
             </mat-icon></button>