different led button group

src/app/app.component.html

@@ -1,16 +1,16 @@
 <table id="maintable">
   <tr>
     <td>
-      <ledbutton topic="led/test1" label="Küche Deckenlampe"></ledbutton>
+      <ledbutton2 topic="led/test1" label="Küche Deckenlampe"></ledbutton2>
     </td>
     <td>
-      <ledbutton topic="led/test2" label="Keller normal"></ledbutton>
+      <ledbutton2 topic="led/test2" label="Keller normal"></ledbutton2>
     </td>
     <td>
-      <ledbutton topic="led/test3" label="Keller hell"></ledbutton>
+      <ledbutton2 topic="led/test3" label="Keller hell"></ledbutton2>
     </td>
     <td>
-      <ledbutton topic="led/test4" label="test4"></ledbutton>
+      <ledbutton2 topic="led/test4" label="test4"></ledbutton2>
     </td>
   </tr>
   <tr>

src/app/app.module.ts

@@ -7,6 +7,7 @@ import { LedindicatorComponent } from './ledindicator/ledindicator.component';
 import { OnOffButtonComponent } from './on-off-button/on-off-button.component';
 import { LedButtonGroupComponent } from './led-button-group/led-button-group.component';
 import { NumberFieldComponent } from './number-field/number-field.component';
+import { LedButtonGroup2Component } from './led-button-group2/led-button-group2.component';
 
 
 @NgModule({
@@ -15,7 +16,8 @@ import { NumberFieldComponent } from './number-field/number-field.component';
     LedindicatorComponent,
     OnOffButtonComponent,
     LedButtonGroupComponent,
-    NumberFieldComponent
+    NumberFieldComponent,
+    LedButtonGroup2Component
   ],
   imports: [
     BrowserModule

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LedButtonGroup2Component } from './led-button-group2.component';
+
+describe('LedButtonGroup2Component', () => {
+  let component: LedButtonGroup2Component;
+  let fixture: ComponentFixture<LedButtonGroup2Component>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LedButtonGroup2Component ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LedButtonGroup2Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MqttclientService } from '../mqttclient.service'
+
+@Component({
+  selector: 'ledbutton2',
+  template: `
+  <div [ngStyle]="{ 'text-align': 'center', 'border': '2px solid black', 
+                    'width': '150px', 'padding':'5px',
+                    'font-family': 'sans-serif' }">
+    {{label}}<br/>
+    <button (click)="clickOff()" [ngStyle]="{'font-size':'100%'}">off</button>
+    <led [topic]="feedbackTopic"></led>
+    <button (click)="clickOn()" [ngStyle]="{'font-size':'100%'}">on</button>
+  </div>
+  `
+})
+export class LedButtonGroup2Component implements OnInit {
+
+  actionTopic : string
+  feedbackTopic : string
+  @Input('topic') topicPre : string
+  @Input() label : string
+
+  constructor(private mqttclientService : MqttclientService) { }
+
+  ngOnInit() {
+    this.actionTopic = this.topicPre + '/state'
+    this.feedbackTopic = this.topicPre + '/feedback'
+  }
+
+
+  clickOn() {
+    this.mqttclientService.publish(this.actionTopic, "ON")
+  }
+
+  clickOff() {
+    this.mqttclientService.publish(this.actionTopic, "OFF")
+  }
+
+
+}

src/app/ledindicator/ledindicator.component.ts

@@ -4,7 +4,7 @@ import { MqttclientService } from '../mqttclient.service'
 @Component({
   selector: 'led',
   template: `
-  <span [ngStyle]="{'color':color, 'font-size':'500%'}">&#x25cf;</span>
+  <span [ngStyle]="{'color':color, 'font-size':'200%', 'padding-right':'5px', 'padding-left':'5px'}">&#x25cf;</span>
   `
 })
 export class LedindicatorComponent implements OnInit {