update

src/app/backend/berechnung.ts

@@ -18,13 +18,33 @@ export class Berechnung {
     return this.binArr.join(".")
   }
 
+  binToDec(bin: string) {
+    var arr = bin.split(" ")
+    alert(arr)
+    let binNum = ""
+    for (let index = 0; index < arr.length; index++) {
+      binNum += parseInt(arr[index], 2).toString();
+
+    }
+    return binNum;
+
+  }
+
   subNetMask(prefix: number) {
     let mask = ""
     return mask;
   }
 
-  broadCast(arr: any[]) {
+  broadCastBin(binIp: string, prefix: number) {
-
+    var arr = binIp.split('.');
+    let prefixIp = arr.join("");
+    let hostbin = prefixIp.slice(0, prefix);
+    hostbin = hostbin + "1".repeat(32 - prefix);
+    for (let i = 8; i <= hostbin.length; i += 8) {
+      hostbin = [hostbin.slice(0, i), " ", hostbin.slice(i)].join('')
+      i++
+    }
+    return hostbin
   }
 
   netId(mask: string) {

src/app/input/input.component.html

@@ -12,5 +12,5 @@
             </mat-option>
         </mat-select>
     </mat-form-field>
-    <button mat-raised-button (click)="onClick();">Calculate</button>
+    <button mat-raised-button (click)="onClick()">Calculate</button>
 </div>

src/app/input/input.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Berechnung } from '../backend/berechnung';
+import { MyserviceService } from '../myservice.service';
 
 @Component({
   selector: 'app-input',
@@ -11,18 +12,18 @@ export class InputComponent implements OnInit {
   ipv4_eingabe: string = "";
   prefix_selection: number = 0;
 
-
+  constructor(public service: MyserviceService) {
-  constructor() {
     for (let i = 0; i <= 32; i++) {
       this.counter.push(i);
     }
   }
 
   onClick() {
-    var berechnung = new Berechnung;
+    var calc = new Berechnung;
-    let number = berechnung.decToBin(this.ipv4_eingabe)
+    this.service.bin_dec_dict.Ipv4.bin = calc.decToBin(this.ipv4_eingabe)
-    alert(number)
+    this.service.bin_dec_dict.Ipv4.dec = this.ipv4_eingabe;
-
+    this.service.bin_dec_dict.Broadcast.bin = calc.broadCastBin(this.service.bin_dec_dict.Ipv4.bin, this.prefix_selection);
+    this.service.bin_dec_dict.Broadcast.dec = calc.binToDec(this.service.bin_dec_dict.Broadcast.bin)
   }
 
   ngOnInit(): void {

src/app/myservice.service.ts

@@ -4,6 +4,31 @@ import { Injectable } from '@angular/core';
   providedIn: 'root'
 })
 export class MyserviceService {
-
+  bin_dec_dict = {
+    Ipv4: {
+      dec: "",
+      bin: ""
+    },
+    Subnet: {
+      dec: "",
+      bin: ""
+    },
+    Broadcast: {
+      dec: "",
+      bin: ""
+    },
+    NetID: {
+      dec: "",
+      bin: ""
+    },
+    FirstIP: {
+      dec: "",
+      bin: ""
+    },
+    LastIP: {
+      dec: "",
+      bin: ""
+    }
+  }
   constructor() { }
 }

src/app/output/output.component.html

@@ -1,7 +1,42 @@
-<div class="card" *ngFor="let name of outArr">
+<div class="card">
-    <label class="label">{{name}}</label>
+    <label class="label">Ipv4</label>
     <div>
-        <p><label class="outlabel" *ngFor="let element in bin_dec_dict">{{element}}</label></p>
+        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Ipv4.dec}}</label></p>
-        <p><label class="outlabel">Binary:</label><label>{{bin}}</label></p>
+        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Ipv4.bin}}</label></p>
+    </div>
+</div>
+<div class="card">
+    <label class="label">Subnet Mask</label>
+    <div>
+        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Subnet.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Subnet.bin}}</label></p>
+    </div>
+</div>
+<div class="card">
+    <label class="label">Broadcast</label>
+    <div>
+        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.Broadcast.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.Broadcast.bin}}</label></p>
+    </div>
+</div>
+<div class="card">
+    <label class="label">NetID</label>
+    <div>
+        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.NetID.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.NetID.bin}}</label></p>
+    </div>
+</div>
+<div class="card">
+    <label class="label">First Ip</label>
+    <div>
+        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.FirstIP.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.FirstIP.bin}}</label></p>
+    </div>
+</div>
+<div class="card">
+    <label class="label">Last Ip</label>
+    <div>
+        <p><label class="outlabel">Ip:</label><label>{{service.bin_dec_dict.LastIP.dec}}</label></p>
+        <p><label class="outlabel">Binary:</label><label>{{service.bin_dec_dict.LastIP.bin}}</label></p>
     </div>
 </div>

src/app/output/output.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
-import { Berechnung } from '../backend/berechnung';
+import { MyserviceService } from '../myservice.service';
-import { InputComponent } from '../input/input.component';
+
 
 
 @Component({
@@ -10,40 +10,14 @@ import { InputComponent } from '../input/input.component';
 })
 export class OutputComponent implements OnInit {
 
-
+  inputIp = "";
-  // Dictionary
-  bin_dec_dict = {
-    ipv4_dec: "",
-    ipv4_bin: "",
-    subnet_dec: "",
-    subnet_bin: "",
-    broadcast_dec: "",
-    broadcast_bin: "",
-    netID_de: "",
-    netID_bin: "",
-    firstIP_dec: "",
-    firstIP_bin: "",
-    lastIP_dec: "",
-    lastIP_bin: ""
-  }
-
-
-
-  bin = "";
-  dec = "";
   prefix = 0;
 
   outArr = ["IPv4", "Subnetmask:", "Broadcast:", "Net-ID:", "First Ip:", "Last Ip:"]
-  constructor() {
+  constructor(public service: MyserviceService) {
   }
 
-  onClick() {
-    var br = new Berechnung;
 
-    // Dict Zugriff
-    this.bin_dec_dict.ipv4_bin = br.decToBin(this.dec)
-    this.bin_dec_dict.subnet_bin = br.subNetMask(this.prefix)
-  }
 
   ngOnInit(): void {