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
– dhilt, Commented Sep 23, 2017 at 9:29
Yes, no luck yet however. It seems that I am missing something basic in this case. — rrz0
– rrz0, Commented Sep 23, 2017 at 9:43
Could you add more code relating to RecipeListComponent? Maybe there's some issue with recipes array reference... — dhilt
– dhilt, Commented Sep 23, 2017 at 9:59

dhilt · Accepted Answer · 2018-01-06 01:21:30Z

4

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));
  }
}

edited Jan 6, 2018 at 1:21

answered Sep 23, 2017 at 10:20

dhilt

21.1k8 gold badges79 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rrz0 · Accepted Answer · 2017-09-23 10:41:09Z

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, 2017 at 10:41

rrz0

2,3228 gold badges33 silver badges68 bronze badges

answered Sep 23, 2017 at 10:26

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related