From 5e22966517d75353ae104663a714fc079dca3485 Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Mon, 6 Jun 2022 11:07:40 +0200
Subject: [PATCH] add: visible forms per button

---
 src/app/app.component.html | 18 ++++++++++++------
 src/app/app.component.ts   | 30 +++++++++++++++++++++++++-----
 2 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0f4d33a..b93cc66 100644
--- 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 2a4cb8e..153a178 100644
--- 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;
+	}
 }
-- 
2.39.5