iterate component using *ngFor

Question

I am facing problem generating components using ngFor directive in angular2.

My desired component model tree is: RootComponent ArticlesComponent Article_1 Article_2 Article_N

**RootComponent.html**
<section>Html for root component goes here</section>
<articles>This contains the articles html and will act as container for enumerated article tags</articles>

**Articles.component.ts**


 import {Component} from "@angular/core";
 import {ArticleComponent} from "./article.component";


 @Component({
             moduleId : module.id,
             selector : 'articles-list',
             template : `<div class="row">
                           <ul>
                             <li *ngFor="let article of articles" >
                                       <article [title]="article.title"
                                       [link]="article.link"></article>
                             </li>
                           </ul>
                        </div>`
           })


 export class ArticleListComponent{

     public articles :ArticleComponent[];

     constructor(){
        this.articles = [];
        let articleObj1 = new ArticleComponent("title1","link1");
        let articleObj2 = new ArticleComponent("title2","link2");
        this.articles.push(articleObj1);
        this.articles.push(articleObj2);
     }

  }

  **Article.component.ts**

   import {Component,Input} from "@angular/core";

   @Component({
               moduleId: module.id,
               selector: 'article',
               templateUrl: `<div class ="row">
                               <h3>{{title}}</h3>
                               <h5><a href="#" >{{link}}</a></h5> 
                             </div>`
             })


   export class ArticleComponent {

         @Input() title : string;
         @Input() link : string;

         public count:number;

         constructor(title,link){
                this.title = title;
                this.link = link;
         }

         incrementCount(){
            this.count++;
         }


     }

System.js throws an error :

(SystemJS) Can't resolve all parameters for ArticleComponent: (?, ?).↵  Error: Can't resolve all parameters for ArticleComponent: (?, ?).↵

What does this error actually mean and how to rectify this?

Answer 1

ArticleComponent is instantiated by Angulars DI. If it has parameters, they need to be resolvable by DI. title and link are not resolvable, because there are no providers. Parameters without type annotations also would need an @Injectable() decorator.

I think the right approach is to remove the parameters from the constructor and instead use only the inputs.

 export class ArticleComponent {

     @Input() title : string;
     @Input() link : string;

     public count:number;

     /*constructor(title,link){
            this.title = title;
            this.link = link;
     }*/

     incrementCount(){
        this.count++;
     }
 }

also the constructor in ArticleListComponent can be shortened, because as mentioned DI creates the component instances.

 export class ArticleListComponent{

     public articles :ArticleComponent[];

     /*
     constructor(){
        this.articles = [];
        let articleObj1 = new ArticleComponent("title1","link1");
        let articleObj2 = new ArticleComponent("title2","link2");
        this.articles.push(articleObj1);
        this.articles.push(articleObj2);
     }*/
  }

all you need is the data for *ngFor , the rest is done by <article>

 export class ArticleListComponent{

     public articles :ArticleComponent[];

     constructor(){
        this.articles = [{title: "title1",link: "link1"}, {title: "title2",link: "link2"}];
     }
  }

Answer 2

As per your code , just change

let articleObj1 = {"title":"title1","link" : "link1"};
let articleObj2 = {"title":"title2","link" : "link2"};

And you will get , desired output.

There is no need to do :

let articleObj1 = new ArticleComponent("title1","link1");
let articleObj2 = new ArticleComponent("title2","link2");

Error is related to the ArticleComponent("title1","link1") , Your ArticleComponent doesn't have those two params in constructor.