diff --git a/package-lock.json b/package-lock.json
index 6d9355f..90a9f50 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index fad82b9..9407b01 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6807861..0a6e8bf 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,28 +1,67 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ Wohnzimmer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Esszimmer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9367c91..426d179 100644
--- a/src/app/app.module.ts
+++ b/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
diff --git a/src/app/led-button-group2/led-button-group2.component.ts b/src/app/led-button-group2/led-button-group2.component.ts
index e76f239..7111197 100644
--- a/src/app/led-button-group2/led-button-group2.component.ts
+++ b/src/app/led-button-group2/led-button-group2.component.ts
@@ -4,13 +4,13 @@ import { MqttclientService } from '../mqttclient.service'
@Component({
selector: 'ledbutton2',
template: `
-
{{label}}
- off
+ off
- on
+ on
`
})
diff --git a/src/styles.css b/src/styles.css
index 90d4ee0..5f69d4f 100644
--- a/src/styles.css
+++ b/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";