Adding content to an array and outputting using ngFor in Angular 4

Question

I have been stuck with the basic task, of trying to update an array and output the according values. This has been affecting the whole application.

I reduced and simplified my problem to the following. First I created the following model:

export class Recipe {
  public name: string;
  public description: string;
  public imagePath: string;


constructor(name: string, desc: string, imagePath: string) {
  this.name = name;
  this.description = desc;
  this.imagePath = imagePath;
  }
}

I then proceeded to adding content to the recipes component:

import { Component, OnInit } from '@angular/core';

import { Recipe } from '../recipe.model';


@Component({
   selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
   styleUrls: ['./recipe-list.component.css']
 })

 export class RecipeListComponent implements OnInit {

  recipes: Recipe[] = [
    new Recipe('NAME', 'DESC','URL1'),
    new Recipe('NAME2', 'DESC2','URL2')
   ];

   constructor() {
   }

   ngOnInit() {
   }
}

I then use *ngFor in the following manner:

 <a 
  href="#"
  class="list-group-item clearfix"
  *ngFor="let recipe of recipes">
  <div">
    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
    <p class="list-group-item-text">{{ recipe.description }}</p>
  </div>
  <span>
    <img
      src="{{ recipe.imagePath }}"
      alt="{{ recipe.name }}"
      class="img-responsive"
      style="max-height: 50px;">
  </span>
</a>

I have looked at other questions such as this, however I was unable to implement solutions accordingly.

I am unable to see changes on the browser when I change my array values.

How can I add new recipes and make them visible in the browser using *ngFor ?

Any pointers on what core functionality I am missing would be appreciated.

Did you try `this.recipes.push(new Recipe('NAME2', 'DESC2', 'URL2'))` in your component? — dhilt, Sep 23 '17 at 09:29
Yes, no luck yet however. It seems that I am missing something basic in this case. — rrz0, Sep 23 '17 at 09:43
Could you add more code relating to `RecipeListComponent`? Maybe there's some issue with `recipes` array reference... — dhilt, Sep 23 '17 at 09:59

dhilt · Accepted Answer · 2018-01-06T01:21:30.087

I created working demo on your issue: https://plnkr.co/edit/u2bq5T?p=preview

Template:

 <button (click)="addRecord()">Add a record</button>
 <a 
  href="#"
  class="list-group-item clearfix"
  *ngFor="let recipe of recipes">
  <div>
    <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
    <p class="list-group-item-text">{{ recipe.description }}</p>
  </div>
  <span>
    <img
      src="{{ recipe.imagePath }}"
      alt="{{ recipe.name }}"
      class="img-responsive"
      style="max-height: 50px;">
  </span>
</a>

Class:

export class App {
  index:number = 2;
  recipes: Recipe[] = [
    new Recipe('NAME', 'DESC','URL1'),
    new Recipe('NAME2', 'DESC2','URL2')
   ];

  constructor() {
  }

  addRecord() {
    this.index++;
    this.recipes.push(new Recipe('NAME' + this.index, 'DESC'+ this.index,'URL' +this.index));
  }
}

score 2 · Answer 2 · edited Sep 23 '17 at 10:41

2

I would do it like this:

recipes : Recipe[] = [];
recipe : Recipe;

ngOnInit() {
 this.recipes.push(this.recipe = {name: 'asd'}, 
                   this.recipe = {name: 'asf'});
 console.log(this.recipes);
}

I think it's a bit less error prone, because if you change any properties of Recipe, this would help to debug, because you see what value is assigned to property (name: 'asd')

edited Sep 23 '17 at 10:41

rrz0

2,182
5
30
65

answered Sep 23 '17 at 10:26

Julius Dzidzevičius

10,775
11
36
81

Adding content to an array and outputting using ngFor in Angular 4

2 Answers2