From 651c877315b0669eeb4a3a8447691ae65accf20b Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Wed, 4 Dec 2019 21:49:49 -0500 Subject: Add base for add-recipe component Just changes done by `ng g component add-recipe` --- .../src/app/add-recipe/add-recipe.component.css | 0 .../src/app/add-recipe/add-recipe.component.html | 1 + .../app/add-recipe/add-recipe.component.spec.ts | 25 ++++++++++++++++++++++ .../src/app/add-recipe/add-recipe.component.ts | 15 +++++++++++++ recipeBuddy/src/app/app.module.ts | 6 ++++-- 5 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 recipeBuddy/src/app/add-recipe/add-recipe.component.css create mode 100644 recipeBuddy/src/app/add-recipe/add-recipe.component.html create mode 100644 recipeBuddy/src/app/add-recipe/add-recipe.component.spec.ts create mode 100644 recipeBuddy/src/app/add-recipe/add-recipe.component.ts (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.css b/recipeBuddy/src/app/add-recipe/add-recipe.component.css new file mode 100644 index 0000000..e69de29 diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html new file mode 100644 index 0000000..29e904b --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -0,0 +1 @@ +

add-recipe works!

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.spec.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.spec.ts new file mode 100644 index 0000000..86b2da6 --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AddRecipeComponent } from './add-recipe.component'; + +describe('AddRecipeComponent', () => { + let component: AddRecipeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AddRecipeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AddRecipeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts new file mode 100644 index 0000000..a7be0e0 --- /dev/null +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-add-recipe', + templateUrl: './add-recipe.component.html', + styleUrls: ['./add-recipe.component.css'] +}) +export class AddRecipeComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index eaa0553..fb12cf6 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -9,13 +9,15 @@ import { StepCardComponent } from './cook-page/step-card/step-card.component'; import { AppRoutingModule } from './app-routing.module'; -import {HttpClientModule } from '@angular/common/http' +import { HttpClientModule } from '@angular/common/http'; +import { AddRecipeComponent } from './add-recipe/add-recipe.component' @NgModule({ declarations: [ AppComponent, CookPageComponent, - StepCardComponent + StepCardComponent, + AddRecipeComponent ], imports: [ BrowserModule, -- cgit v1.1 From 443ded565b1482eaf17176967372f3986497f1b8 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Wed, 4 Dec 2019 23:00:02 -0500 Subject: Add basic form for adding a recipe --- .../src/app/add-recipe/add-recipe.component.html | 75 +++++++++++++++++++++- .../src/app/add-recipe/add-recipe.component.ts | 57 +++++++++++++++- recipeBuddy/src/app/app-routing.module.ts | 4 +- recipeBuddy/src/app/app.module.ts | 7 +- 4 files changed, 137 insertions(+), 6 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index 29e904b..3a42687 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -1 +1,74 @@ -

add-recipe works!

+
+ + + + + + + +
+

Ingredients

+ +
+
+

Ingredient {{ i + 1 }}

+ + + +
+
+
+ +
+

Steps

+ +
+
+

Step {{ i + 1 }}

+ + +
+
+
+
+

+Value: {{ recipeForm.value | json }} +

diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts index a7be0e0..b0e5ce5 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts @@ -1,15 +1,68 @@ import { Component, OnInit } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +import { FormBuilder } from '@angular/forms'; +import { FormArray } from '@angular/forms'; + @Component({ selector: 'app-add-recipe', templateUrl: './add-recipe.component.html', styleUrls: ['./add-recipe.component.css'] }) -export class AddRecipeComponent implements OnInit { - constructor() { } +export class AddRecipeComponent { + + recipeForm = this.fb.group({ + recipeName: [''], + desc: [''], + ingredients: this.fb.array([ + this.fb.group({ + ingrName: [''], + amount: [''], + units: [''] + }) + ]), + steps: this.fb.array([ + this.fb.group({ + instruct: [''], + timer: [''] + }) + ]), + servingSize: [''], + cookTime: [''], + tags: [''], + photos: [''] + }); + constructor(private fb: FormBuilder) { } ngOnInit() { } + get ingredients() { + return this.recipeForm.get('ingredients') as FormArray; + } + + addIngredient() { + this.ingredients.push( + this.fb.group({ + ingrName: [''], + amount: [''], + units: [''] + }) + ); + } + + get steps() { + return this.recipeForm.get('steps') as FormArray; + } + + addStep() { + this.steps.push( + this.fb.group({ + instruct: [''], + timer: [''] + }) + ); + } } diff --git a/recipeBuddy/src/app/app-routing.module.ts b/recipeBuddy/src/app/app-routing.module.ts index a6e4399..bb7c96e 100644 --- a/recipeBuddy/src/app/app-routing.module.ts +++ b/recipeBuddy/src/app/app-routing.module.ts @@ -2,10 +2,12 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { CookPageComponent } from './cook-page/cook-page.component'; +import { AddRecipeComponent } from './add-recipe/add-recipe.component'; const routes: Routes = [ { path: '', redirectTo: '/cook', pathMatch: 'full' }, - { path: 'cook', component: CookPageComponent } + { path: 'cook', component: CookPageComponent }, + { path: 'add', component: AddRecipeComponent } ]; @NgModule({ diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index fb12cf6..4d2ab47 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -10,7 +10,9 @@ import { StepCardComponent } from './cook-page/step-card/step-card.component'; import { AppRoutingModule } from './app-routing.module'; import { HttpClientModule } from '@angular/common/http'; -import { AddRecipeComponent } from './add-recipe/add-recipe.component' +import { AddRecipeComponent } from './add-recipe/add-recipe.component'; + +import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ declarations: [ @@ -23,7 +25,8 @@ import { AddRecipeComponent } from './add-recipe/add-recipe.component' BrowserModule, AppRoutingModule, MatCardModule, - HttpClientModule + HttpClientModule, + ReactiveFormsModule ], providers: [], bootstrap: [AppComponent] -- cgit v1.1 From 1431653196467eec7608cb30592d462b4c207be4 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Thu, 5 Dec 2019 15:03:16 -0500 Subject: Add material look to Add Recipe form --- .../src/app/add-recipe/add-recipe.component.css | 15 ++++ .../src/app/add-recipe/add-recipe.component.html | 91 ++++++++++------------ recipeBuddy/src/app/app.module.ts | 13 +++- 3 files changed, 70 insertions(+), 49 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.css b/recipeBuddy/src/app/add-recipe/add-recipe.component.css index e69de29..901e02d 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.css +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.css @@ -0,0 +1,15 @@ +.form { + min-width: 150px; + max-width: 750px; + width: 100%; + margin-left: auto; + margin-right: auto; +} + +.full-width { + width: 100%; +} + +td { + padding-right: 8px; +} diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index 3a42687..b4f70ce 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -1,70 +1,65 @@ -
- - - - - - + +

Add Recipe

+ + + + + + + + + + + + + + + + + +

Ingredients

- +

Ingredient {{ i + 1 }}

- - - +

Steps

- +

Step {{ i + 1 }}

- - +
diff --git a/recipeBuddy/src/app/app.module.ts b/recipeBuddy/src/app/app.module.ts index 4d2ab47..359254e 100644 --- a/recipeBuddy/src/app/app.module.ts +++ b/recipeBuddy/src/app/app.module.ts @@ -13,6 +13,12 @@ import { HttpClientModule } from '@angular/common/http'; import { AddRecipeComponent } from './add-recipe/add-recipe.component'; import { ReactiveFormsModule } from '@angular/forms'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { MatInputModule } from '@angular/material/input'; +import { MatFormFieldModule } from '@angular/material'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; @NgModule({ declarations: [ @@ -26,7 +32,12 @@ import { ReactiveFormsModule } from '@angular/forms'; AppRoutingModule, MatCardModule, HttpClientModule, - ReactiveFormsModule + ReactiveFormsModule, + NoopAnimationsModule, + MatInputModule, + MatFormFieldModule, + MatIconModule, + MatButtonModule ], providers: [], bootstrap: [AppComponent] -- cgit v1.1 From efc880aa101b046e77ff9feb5045225cd44afbf8 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Fri, 6 Dec 2019 15:14:17 -0500 Subject: Add submit button to form --- recipeBuddy/src/app/add-recipe/add-recipe.component.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index b4f70ce..7569560 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -1,4 +1,4 @@ - +

Add Recipe

@@ -63,6 +63,7 @@ +

Value: {{ recipeForm.value | json }} -- cgit v1.1 From aeb7bfe5c46a4bb146d0e28560c535d6e7e3ef2d Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Fri, 6 Dec 2019 15:16:05 -0500 Subject: Add instruction for lists in form The keyword and photos input now have a placeholder instructing the user to separate inputs with commas. --- recipeBuddy/src/app/add-recipe/add-recipe.component.html | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index 7569560..699f306 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -13,11 +13,13 @@ - - + + Keywords/Tags + - - + + Photos (URLS) +

-- cgit v1.1 From 994f8ee685d9db04d575ceabee869b9e948684c2 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Fri, 6 Dec 2019 15:17:32 -0500 Subject: Add convert form data to Recipe Object --- .../src/app/add-recipe/add-recipe.component.ts | 46 +++++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts index b0e5ce5..eaa45d2 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts @@ -5,6 +5,12 @@ import { FormControl } from '@angular/forms'; import { FormBuilder } from '@angular/forms'; import { FormArray } from '@angular/forms'; +import { Recipe } from '../DataModels/recipe'; +import { Ingredient } from '../DataModels/ingredient' +import { Step } from '../DataModels/step'; +import { BackendService } from '../REST_service/backend.service'; + + @Component({ selector: 'app-add-recipe', templateUrl: './add-recipe.component.html', @@ -34,7 +40,9 @@ export class AddRecipeComponent { tags: [''], photos: [''] }); - constructor(private fb: FormBuilder) { } + constructor(private fb: FormBuilder, + private restService: BackendService + ) { } ngOnInit() { } @@ -65,4 +73,40 @@ export class AddRecipeComponent { }) ); } + + onSubmit() { + console.log('In Submit') + var formData = this.recipeForm.value; + + var ingredients = [] + var i; + for (i = 0; i < formData.ingredients.length; i++) { + ingredients.push(new Ingredient(formData.ingredients[0].ingrName, + formData.ingredients[0].amount, + formData.ingredients[0].unit, + "" + )); + } + + var steps = [] + for (i = 0; i < formData.ingredients.length; i++) { + steps.push(new Step(formData.steps[0].instruct, + formData.steps[0].timer + )); + } + + var recipe = new Recipe (0, //id + formData.recipeName, //name + formData.desc, //description + ingredients, //ingredients + steps, //steps + formData.servingSize, //servingSize + formData.cookTime, //cookTime + 0, //timesCooked + 0, //rating + formData.tags, //tags + formData.photos //photos + ); + console.log(JSON.stringify(recipe)) + } } -- cgit v1.1 From 5fdef8455c33dcd192497c6fe0217ccb89e8bf66 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Fri, 6 Dec 2019 15:18:01 -0500 Subject: Fix constructors for Step and Recipe data models --- recipeBuddy/src/app/DataModels/recipe.ts | 14 +++++++++++++- recipeBuddy/src/app/DataModels/step.ts | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/DataModels/recipe.ts b/recipeBuddy/src/app/DataModels/recipe.ts index 368f237..937153f 100644 --- a/recipeBuddy/src/app/DataModels/recipe.ts +++ b/recipeBuddy/src/app/DataModels/recipe.ts @@ -14,7 +14,17 @@ export class Recipe { private tags: string[]; private photos: string[]; - public constructor(id: number, name: string, description: string, ingredients: Ingredient[], steps: Step[], servingSize: number, cookTime: number, rating: number, tags: string[]) { + public constructor(id: number, + name: string, + description: string, + ingredients: Ingredient[], + steps: Step[], + servingSize: number, + cookTime: number, + timesCooked: number, + rating: number, + tags: string[], + photos: string[]) { this.id = id; this.name = name; this.description = description; @@ -24,6 +34,8 @@ export class Recipe { this.cookTime = cookTime; this.rating = rating; this.tags = tags; + this.photos = photos; + this.timesCooked = timesCooked; } public getId(): number { diff --git a/recipeBuddy/src/app/DataModels/step.ts b/recipeBuddy/src/app/DataModels/step.ts index 1c1ca7b..67e14c1 100644 --- a/recipeBuddy/src/app/DataModels/step.ts +++ b/recipeBuddy/src/app/DataModels/step.ts @@ -2,7 +2,7 @@ export class Step { private instruction: string; private timer: number; - public contructor(instruction: string, timer: number) { + public constructor(instruction: string, timer: number) { this.instruction = instruction; this.timer = timer; } -- cgit v1.1 From 3b43f292a605717d08d3623e09bf35a4e0301414 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Sat, 7 Dec 2019 10:54:24 -0500 Subject: Fix set non-submit buttons type to "button" This stops these buttons from triggering the submit action. --- recipeBuddy/src/app/add-recipe/add-recipe.component.html | 5 +++-- recipeBuddy/src/app/add-recipe/add-recipe.component.ts | 1 - 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index 699f306..7e80e4e 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -24,7 +24,8 @@

Ingredients

-
@@ -48,7 +49,7 @@

Steps

-
diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts index eaa45d2..469871b 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.ts +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.ts @@ -75,7 +75,6 @@ export class AddRecipeComponent { } onSubmit() { - console.log('In Submit') var formData = this.recipeForm.value; var ingredients = [] -- cgit v1.1 From 2a89221eee68bc26ea3e90c380ce983f5a0985f0 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Sat, 7 Dec 2019 11:51:22 -0500 Subject: Add removing Ingredients/Steps from add form --- .../src/app/add-recipe/add-recipe.component.css | 30 +++++++++++++++++++++- .../src/app/add-recipe/add-recipe.component.html | 8 ++++++ .../src/app/add-recipe/add-recipe.component.ts | 8 ++++++ 3 files changed, 45 insertions(+), 1 deletion(-) (limited to 'recipeBuddy/src/app') 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 @@ +
@@ -63,6 +67,10 @@ +
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; -- cgit v1.1 From 75a82f8a40b9f296aa71a4b6cef0fa8ea8a1c591 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Sat, 7 Dec 2019 11:52:00 -0500 Subject: Fix UI of add form Moves Add/Delete buttons around Puts Ingredient/Step parts together Changes Submit button look Removes JSON preview of form value object --- .../src/app/add-recipe/add-recipe.component.html | 40 +++++++++++++--------- 1 file changed, 23 insertions(+), 17 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index 47d2ea1..36d45b6 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -24,22 +24,19 @@

Ingredients

-

Ingredient {{ i + 1 }}

- +
+ - + - + @@ -47,35 +44,44 @@ type="button" style="margin-left: 10px"> remove +
+
+ +

Steps

-

Step {{ i + 1 }}

- +
+ - - + Timer + +
+
+ +
- + -

-Value: {{ recipeForm.value | json }} -

-- cgit v1.1 From 4efaeb517b94690483a14f25a224de73c0f1b055 Mon Sep 17 00:00:00 2001 From: Tucker Evans Date: Sat, 7 Dec 2019 13:32:21 -0500 Subject: Add add recipe form requires a recipe name before submitting --- recipeBuddy/src/app/add-recipe/add-recipe.component.html | 6 ++++-- recipeBuddy/src/app/add-recipe/add-recipe.component.ts | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'recipeBuddy/src/app') diff --git a/recipeBuddy/src/app/add-recipe/add-recipe.component.html b/recipeBuddy/src/app/add-recipe/add-recipe.component.html index 36d45b6..a8a3e5f 100644 --- a/recipeBuddy/src/app/add-recipe/add-recipe.component.html +++ b/recipeBuddy/src/app/add-recipe/add-recipe.component.html @@ -1,7 +1,8 @@

Add Recipe

- + - + + + Servings must be a number. + - + + + Minutes + + Must be in the form hh:mm + - Keywords/Tags + Keywords/Tags @@ -25,7 +41,7 @@

Ingredients

-
+

Ingredient {{ i + 1 }}

@@ -34,8 +50,12 @@ formControlName="ingrName"> - + + + Amount must be a number. + - Timer - + + Minutes