Hey Angular 2 people!
I am getting closer on this Recipe Box. I can add a recipe, but when my recipeList component updates, it adds a blank row instead of a row with the new recipe name in it.
Here’s the recipe list component
import { Component } from '@angular/core';
import { RecipeService } from '../shared/recipes.service';
@Component({
selector: 'ml-recipe-list',
templateUrl: 'recipe-list.component.html',
styleUrls: ['recipe-list.component.css'],
})
export class RecipeListComponent {
recipes: Object;
constructor(recipeService: RecipeService) {
this.recipes = recipeService.getRecipes();
}
}
// This is this component's template HTML
// <div class="list-group col-md-12">
// <a href="#" class="list-group-item" *ngFor="let recipe of recipes">{{ recipe.name }}</a>
// </div>
Here is the form component
import { Component } from '@angular/core';
import { RecipeService } from '../shared/recipes.service';
@Component({
selector: 'ml-recipe-details',
templateUrl: 'recipe-details.component.html',
styleUrls: ['recipe-details.component.css'],
})
export class RecipeDetailsComponent {
currentRecipe;
constructor(private recipeService: RecipeService) {
}
onSubmit(form) {
this.recipeService.addRecipes(form);
}
// onDelete() {
// console.log("DELETE REQUEST SENT TO SERVER FOR");
// }
}
// Here's the HTML template for this component<!-- TODO: Update this using new forms module rules, so that I'm actually passing data -->
// <form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
// <div>
// <label for="recipeName">Recipe Name</label>
// <input
// #recipeName="ngModel"
// class="form-control"
// ngModel
// name="recipeName"
// type="text"
// required>
// <div
// *ngIf="recipeName.touched && !recipeName.valid"
// class="alert alert-danger">Your recipe requires a name.
// </div>
// </div>
// <div>
// <label for="ingredients">Ingredients</label>
// <textarea
// #ingredients="ngModel"
// class="form-control"
// ngModel
// name="ingredients"
// type="textarea"
// rows="10"
// required></textarea>
// <div
// *ngIf="ingredients.touched && !ingredients.valid"
// class="alert alert-danger">Your recipe requires ingredients
// </div>
// </div>
// <div>
// <label for="instructions">Instructions</label>
// <textarea
// #instructions="ngModel"
// class="form-control"
// ngModel
// name="instructions"
// type="textarea"
// rows="10"></textarea>
// </div>
// <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Save</button>
// <button type="submit" class="btn btn-danger">Delete</button>
// <p>form: {{ f.value | json }}</p>
// <p>recipeName: {{ recipeName.value | json }}</p>
// <p>ingredients: {{ ingredients.value | json }}</p>
// <p>instructions: {{ instructions.value | json }}</p>
// </form>
Here is my service:
import { Injectable } from '@angular/core';
@Injectable()
export class RecipeService {
recipeArray = [
{name: "Peanut Tofu", ingredients: '', instructions: ''},
{name: "Kale Chips", ingredients: '', instructions: ''},
{name: "Red Lentil Daal", ingredients: '', instructions: ''},
{name: "BBQ Seitan", ingredients: '', instructions: ''}
];
//Eventually this should call the list of recipes from the database
//For now, it is just returning a string array of hard coded recipes
getRecipes() {
return this.recipeArray;
}
//This does nothing at the moment, but should eventually allow us to add a new recipe to our recipe list
//Once I figure out how the hell to do that
addRecipes(form) {
this.recipeArray.push(form);
}
}
//And here is my service along with the current array of recipes that is mocking
//what I might use an HTTP request for in the future.
Any ideas on why when I add a new recipe I am getting a blank row added to the recipe list component rather than one with the new recipe’s name?