List item renderer in Angular 2

Question

I got "dumb" list component that uses another "dumb" component to render single item. And when I want to pass data to renderers I got to have same property in my list component. For example if I want to have "showTimestamp" boolean property for item I got to do this:

list.template.html

<my-item-renderer *ngFor="let item of items" [showTimestamp]="showTimestamp"></my-item-renderer>

Is there a way to do something to replace part of component template?

I would like to do something like this:

<my-list [items]="items"><ng-content><item-renderer [showTimestamp]="true"></item-renderer></ng-content></my-list>

So my list get just items property and in ng-content gets a renderer with already set showTimestamp variable.

score 2 · Accepted Answer · edited May 23 '17 at 12:17

2

You can use template for this:

<my-list [items]="items">
  <template><item-renderer [showTimestamp]="true"></item-renderer></template></my-list>

@Component({
  selector: 'my-list',
  template: `
      <template ngFor [ngForOf]="items" [ngForTemplate]="templateRef"></template>`
})
class MyList {
  @Input() data;
  constructor(private templateRef:TemplateRef) {}
}

See also

edited May 23 '17 at 12:17

Community

1
1

answered Aug 25 '16 at 06:43

Günter Zöchbauer

623,577
216
2,003
1,567

I get "No provider for TemplateRef" error in runtime when using your code. – NagRock Aug 25 '16 at 07:31
The 2nd and 3rd link use `@ContentChild(TemplateRef) templateRef: TemplateRef;` instead of constructor injection. Can you please try that instead. It's a while I used this myself. – Günter Zöchbauer Aug 25 '16 at 07:33
1

Thanks! `@ContentChild(TemplateRef) templateRef: TemplateRef;` is working. – NagRock Aug 25 '16 at 07:38

List item renderer in Angular 2

1 Answers1