Custom template rendering with *ngFor

Question

I have a History component which holds an array of HistoryEntries.

HistoryComponent looks like:

 @Component({
 selector: 'history',
 template: `
    <div>         
       <historyEntry *ngFor='let entry of historyentries'></historyEntry>
    </div> `,
    directives : [HistoryEntryComponent]
 })

The HistoryComponent-class looks like:

export class HistoryComponent{
   public historyentries = [
                    new HistoryEntryComponent(1, "lalala"),
                    new HistoryEntryComponent(2, "xxxxx")
                    ];
}

Then I have a HistoryEntryComponent:

@Component({
  selector: 'historyentry',
  template: `
    <div>
        <h1>ID: {{Id}} , Descr.: {{Description}}</h1>
    </div>
`
})

and a class:

export class HistoryEntryComponent {
   constructor(public Id : Number, public Description : string)
   {}
}

If I render that, nothings shows up. I have already used a <li> to display the id and description, which works like expected. But of course HistoryEntry itself could get very complicated and need its own logic etc. So there must be a way to render <historyentry> as given by a template, isn't it?

In WPF I would say HistoryEntry is a UserControl with its own ViewModel attached.

Answer 1

@Component({
 selector: 'history',
 template: `
    <div>         
       <historyentry *ngFor='let entry of historyentries' [entry]="entry"></historyentry>
    </div> `,
    directives : [HistoryEntryComponent]
})

export class HistoryEntryComponent {
   @Input() entry:HistoryEntry; // or whatever type `entry` is
   constructor()
   {}
}

<h1>ID: {{entry?.Id}} , Descr.: {{entry?.Description}}</h1>