Add removing Ingredients/Steps from add form

3 files changed, 45 insertions, 1 deletions

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.css b/recipeBuddy/src/app/add-recipe/add-recipe.component.css
index 901e02d..9d74c53 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.css
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.css
@@ -1,15 +1,43 @@
 .form {
 	min-width: 150px;
 	max-width: 750px;
-	width: 100%;
+	width: 95%;
 	margin-left: auto;
 	margin-right: auto;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .full-width {
 	width: 100%;
 }
 
+.half-width {
+	width: 50%;
+  padding: 1%;
+  margin-left:auto;
+  margin-right:auto;
+}
+
+.quarter-width {
+	width: 25%;
+  padding: 1%;
+  margin-left:auto;
+  margin-right:auto;
+}
+
+.third-width {
+	width: 33%;
+  padding: 1%;
+  margin-left:auto;
+  margin-right:auto;
+}
+
 td {
 	padding-right: 8px;
 }
+
+.center {
+  margin-left:auto;
+  margin-right:auto;
+}
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
index 7e80e4e..47d2ea1 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html
@@ -43,6 +43,10 @@
 					<input matInput placeholder="Units" type="text"
 					formControlName="units">
 				</mat-form-field>
+				<button matSuffix mat-mini-fab (click)="rmIngredient(i)"
+					type="button" style="margin-left: 10px">
+					<mat-icon>remove</mat-icon>
+				</button>
 			</div>
 		</div>
 	</div>
@@ -63,6 +67,10 @@
 					<input matInput placeholder="Timer" type="text"
 					formControlName="timer">
 				</mat-form-field>
+				<button matSuffix mat-mini-fab (click)="rmStep(i)"
+					type="button" style="margin-left: 10px">
+					<mat-icon>remove</mat-icon>
+				</button>
 			</div>
 		</div>
 	</div>
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
index 469871b..cdd63c8 100644
--- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
+++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts
@@ -61,6 +61,10 @@ export class AddRecipeComponent {
   );
   }
 
+  rmIngredient(i) {
+    this.ingredients.removeAt(i);
+  }
+
   get steps() {
     return this.recipeForm.get('steps') as FormArray;
   }
@@ -74,6 +78,10 @@ export class AddRecipeComponent {
   );
   }
 
+  rmStep(i) {
+    this.steps.removeAt(i);
+  }
+
   onSubmit() {
     var formData = this.recipeForm.value;