material works

package-lock.json

@@ -68,6 +68,14 @@
         "tslib": "1.9.3"
       }
     },
+    "@angular/cdk": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.2.5.tgz",
+      "integrity": "sha512-GN8m1d+VcCE9+Bgwv06Y8YJKyZ0i9ZIq2ZPBcJYt+KVgnVVRg4JkyUNxud07LNsvzOX22DquHqmIZiC4hAG7Ag==",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
     "@angular/cli": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.7.4.tgz",
@@ -201,6 +209,14 @@
       "integrity": "sha512-tgnFAhwBmUs1W0dmcmlBmUlMaOgkoyuSdrcF23lz8W5+nSLb+LnbH5a3blU2NVqA4ESvLKQkPW5dpKa/LuhrPQ==",
       "dev": true
     },
+    "@angular/material": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-5.2.5.tgz",
+      "integrity": "sha512-IltfBeTJWnmZehOQNQ7KoFs7MGWuZTe0g21hIitGkusVNt1cIoTD24xKH5jwztjH19c04IgiwonpurMKM6pBCQ==",
+      "requires": {
+        "tslib": "1.9.3"
+      }
+    },
     "@angular/platform-browser": {
       "version": "5.2.11",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.2.11.tgz",

package.json

@@ -13,11 +13,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.2.4",
     "@angular/common": "^5.2.0",
     "@angular/compiler": "^5.2.0",
     "@angular/core": "^5.2.0",
     "@angular/forms": "^5.2.0",
     "@angular/http": "^5.2.0",
+    "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.0",
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",

src/app/app.component.html

@@ -1,28 +1,67 @@
-<table id="maintable">
-  <tr>
-    <td>
-      <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
-    </td>
-    <td>
-      <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
-    </td>
-    <td>
-      <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
-    </td>
-    <td>
-      <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
-    </td>
-  </tr>
-  <tr>
-      <td>
-        <app-number-field topic="number/test1"></app-number-field>
-      </td>
-      <td>
-      </td>
-      <td>
-      </td>
-      <td>
-      </td>
-    </tr>
 
-</table>
+<mat-tab-group>
+    <mat-tab label="Licht">
+        <mat-accordion>
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Wohnzimmer
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table id="maintable">
+                <tr>
+                  <td>
+                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
+                  </td>
+                </tr>
+              </table>
+              </mat-expansion-panel>
+          <mat-expansion-panel>
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Esszimmer
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table id="maintable">
+                <tr>
+                  <td>
+                    <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
+                  </td>
+                  <td>
+                    <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
+                  </td>
+                </tr>
+              </table>
+              </mat-expansion-panel>
+        </mat-accordion>
+          
+
+
+
+
+
+          
+    </mat-tab>
+    <mat-tab label="Fenster">
+
+    </mat-tab>
+    <mat-tab label="Heizung">
+
+    </mat-tab>
+</mat-tab-group>
+

src/app/app.module.ts

@@ -1,5 +1,11 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
+
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatButtonModule } from '@angular/material/button';
+
 import { MqttclientService } from './mqttclient.service'
 
 import { AppComponent } from './app.component';
@@ -20,7 +26,11 @@ import { LedButtonGroup2Component } from './led-button-group2/led-button-group2.
     LedButtonGroup2Component
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatTabsModule,
+    MatExpansionModule,
+    MatButtonModule
   ],
   providers: [
     MqttclientService

src/app/led-button-group2/led-button-group2.component.ts

@@ -4,13 +4,13 @@ import { MqttclientService } from '../mqttclient.service'
 @Component({
   selector: 'ledbutton2',
   template: `
-  <div [ngStyle]="{ 'text-align': 'center', 'border': '2px solid black', 
+  <div [ngStyle]="{ 'text-align': 'center', 'background-color':'lightgrey', 'border-radius':'10px', 
                     'width': '150px', 'padding':'5px',
                     'font-family': 'sans-serif' }">
     {{label}}<br/>
-    <button (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
+    <button mat-mini-fab color="primary" (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
     <led [topic]="feedbackTopic"></led>
-    <button (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
+    <button mat-mini-fab color="primary" (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
   </div>
   `
 })

src/styles.css

@@ -1 +1,2 @@
 /* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";