add: visible forms per button

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0f4d33acfca114b4d32204ed6ff43a34942135e6..b93cc66ec2809f30d11a0307d5ed44a4ffc12c53 100644 (file)
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,26 @@
-<button class="button main" id="buttonTitle">Titel hinzufügen</button>
-<button class="button main" id="buttonSubtitle">Untertitel hinzufügen</button>
-<button class="button main" id="buttonFood">Speise hinzufügen</button>
+<button class="button main"
+       id="buttonTitle"
+       (click)="changeFormTitleVisible()">Titel hinzufügen</button>
+<button class="button main"
+       id="buttonSubtitle"
+       (click)="changeFormSubtitleVisible()">Untertitel hinzufügen</button>
+<button class="button main"
+       id="buttonFood"
+       (click)="changeFormFoodVisible()">Speise hinzufügen</button>
 
-<form class="form" id="formTitle">
+<form class="form" id="formTitle" *ngIf="formTitleVisible">
        <label>Titel</label>
        <input name="title" type="text" />
        <button class="button" id="addTitle">Hinzufügen</button>
 </form>
 
-<form class="form" id="formSubtitle" >
+<form class="form" id="formSubtitle" *ngIf="formSubtitleVisible">
        <label>Untertitel</label>
        <input name="subtitle" type="text" />
        <button class="button" id="addSubtitle">Hinzufügen</button>
 </form>
 
-<form class="form" id="formFood">
+<form class="form" id="formFood" *ngIf="formFoodVisible">
        <label>Speise</label>
        <input name="food" type="text" />
        <label>Beilage</label>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2a4cb8e949f8ee800f1082867ec6a51ddc99f071..153a178919ba2681b51a8abe65458776191e76f0 100644 (file)
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,30 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+       selector: 'app-root',
+       templateUrl: './app.component.html',
+       styleUrls: ['./app.component.css']
 })
-export class AppComponent {
-  title = 'speisekarten-generator';
+
+export class AppComponent
+{
+       public title = 'speisekarten-generator';
+       public formTitleVisible = false;
+       public formSubtitleVisible = false;
+       public formFoodVisible = false;
+
+       public changeFormTitleVisible()
+       {
+               this.formTitleVisible = !this.formTitleVisible;
+       }
+
+       public changeFormSubtitleVisible()
+       {
+               this.formSubtitleVisible = !this.formSubtitleVisible;
+       }
+
+       public changeFormFoodVisible()
+       {
+               this.formFoodVisible = !this.formFoodVisible;
+       }
 }