variablen deklaration

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { OutputComponent } from './output/output.component';
+import { FormsModule } from '@angular/forms';
 
 
 @NgModule({
@@ -25,7 +26,8 @@ import { OutputComponent } from './output/output.component';
     BrowserAnimationsModule,
     MatInputModule,
     MatFormFieldModule,
-    MatSelectModule
+    MatSelectModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/input/input.component.html

@@ -1,16 +1,16 @@
 <div class="input">
     <mat-form-field class="input_field" appearance="fill">
         <mat-label>IPv4</mat-label>
-        <input matInput>
+        <input matInput [(ngModel)]="ipv4_eingabe">
     </mat-form-field>
 
     <mat-form-field class="select" appearance="fill">
         <mat-label>Prefix</mat-label>
-        <mat-select>
+        <mat-select [(ngModel)]="prefix_selection">
             <mat-option *ngFor="let number of counter" value="{{number}}">
                 {{number}}
             </mat-option>
         </mat-select>
     </mat-form-field>
-    <button mat-raised-button>Calculate</button>
+    <button mat-raised-button (click)="onClick();">Calculate</button>
 </div>

src/app/input/input.component.ts

@@ -7,13 +7,19 @@ import { Component, OnInit } from '@angular/core';
 })
 export class InputComponent implements OnInit {
   counter: Array<number> = [];
+  ipv4_eingabe: string = "";
+  prefix_selection: number = 0;
+
+
   constructor() {
     for (let i = 0; i <= 32; i++) {
       this.counter.push(i);
     }
   }
 
-
+  onClick() {
+    alert(this.prefix_selection + " " + this.ipv4_eingabe)
+  }
 
   ngOnInit(): void {
   }

src/app/output/output.component.html

@@ -1,3 +1,5 @@
-<div class="card">
-    <label>Subnetmask:</label>
+<div class="card" *ngFor="let name of out">
+    <label class="label">{{name}}</label>
+    <p><label class="outlabel">IP:</label><label>{{ipv4_dec}}</label></p>
+    <p><label class="outlabel">Binary:</label><label>{{ipv4_bin}}</label></p>
 </div>

src/app/output/output.component.scss

@@ -1,9 +1,22 @@
 .card {
-    min-height: 20px;
+    min-height: 40px;
     background-color: white;
-    width: 600px;
+    width: 700px;
     border: 1px solid rgba(0, 0, 0, 0.30);
     border-radius: 10px;
     overflow: hidden;
     position: relative;
+    padding-left: 10px;
+    padding-top: 5px;
+    margin-bottom: 10px;
+    margin-left: 5px;
+}
+
+.label {
+    font-size: 18px;
+
+}
+
+.outlabel {
+    margin-right: 30px;
 }