Remove Angular Material

package-lock.json

@@ -613,14 +613,6 @@
         }
       }
     },
-    "@angular/material": {
-      "version": "10.1.3",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-10.1.3.tgz",
-      "integrity": "sha512-6ygbCVcejFydmZUlOcNreiWQTvL4kOrEp/M51DV70hqffTnxajCzaRe2MQhxisENB/bR8mtMvf8YY3Rsys/HCw==",
-      "requires": {
-        "tslib": "^2.0.0"
-      }
-    },
     "@angular/platform-browser": {
       "version": "10.0.14",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-10.0.14.tgz",

package.json

@@ -19,7 +19,6 @@
     "@angular/core": "~10.0.14",
     "@angular/forms": "~10.0.14",
     "@angular/localize": "^10.0.14",
-    "@angular/material": "^10.1.3",
     "@angular/platform-browser": "~10.0.14",
     "@angular/platform-browser-dynamic": "~10.0.14",
     "@angular/router": "~10.0.14",

src/app/app.module.ts

@@ -1,16 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
-// Angular Material Components
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatButtonModule} from '@angular/material/button';
-import {MatTableModule} from '@angular/material/table';
-import {MatInputModule} from '@angular/material/input';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatIconModule} from '@angular/material/icon';
-
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -31,13 +21,6 @@ import { BikesComponent } from './pages/bikes/bikes.component';
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    MatToolbarModule,
-    MatButtonModule,
-    MatTableModule,
-    MatInputModule,
-    MatMenuModule,
-    MatSlideToggleModule,
-    MatIconModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar id="navbar">
+<!--<div id="navbar">
   <span>Flotte</span>
   <button mat-icon-button [matMenuTriggerFor]="menu" id="menu-trigger-button">
     <mat-icon>more_vert</mat-icon>
@@ -8,4 +8,4 @@
       <mat-slide-toggle (change)="changeTheme($event)" [checked]="darkThemeIsActive">Dark Mode</mat-slide-toggle>
     </div>
   </mat-menu>
-</mat-toolbar>
+</div>-->

src/app/pages/bikes/bikes.component.html

@@ -1,37 +1 @@
-<button mat-raised-button color="primary">Primary</button>
-<button mat-raised-button color="accent">Accent</button>
-
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-
-  <!--- Note that these columns can be defined in any order.
-        The actual rendered columns are set as a property on the row definition" -->
-
-  <!-- Position Column -->
-  <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef> No. </th>
-    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-  </ng-container>
-
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef> Name </th>
-    <td mat-cell *matCellDef="let element" contenteditable (input)="onTableInput(element)"> {{element.name}} </td>
-  </ng-container>
-
-  <!-- Weight Column -->
-  <ng-container matColumnDef="weight">
-    <th mat-header-cell *matHeaderCellDef> Weight </th>
-    <td mat-cell *matCellDef="let element">
-    <mat-form-field><input matInput color="warn" [value]="element.weight"></mat-form-field>
-    </td>
-  </ng-container>
-
-  <!-- Symbol Column -->
-  <ng-container matColumnDef="symbol">
-    <th mat-header-cell *matHeaderCellDef> 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>
+bikes works