2

I'm working on a data grid module. In the grid cells I need to display several types of data. So every cell is a component. Currently I'm using a ComponentFactoryResolver to generate the cells. Something like this: 

<div *ngFor="let row of grid.data">
    <app-dynamic-content [context]="row" [type]="type"></app-dynamic-content>
</div>

But there is an another solution without ComponentFactoryResolver, only using *ngIf to decide which component to display in the cell:

<div *ngFor="let row of grid.data">
     <app-row-something *ngIf="type === 'rowType1'" data="row"></app-row-something>
     <app-row-something2 *ngIf="type === 'rowType2'" data="row"></app-row-something2>
     <app-row-something3 *ngIf="type === 'rowType3'" data="row"></app-row-something3>
     <app-row-something4 *ngIf="type === 'rowType4'" data="row"></app-row-something4>
     <app-row-something5 *ngIf="type === 'rowType5'" data="row"></app-row-something5>
    ...
</div>

Which one has the better performance and why?

Viktor
  • 93
  • 1
  • 6
  • Define **better**. Do you mean which has better performance? Better readability? Which one is easier to maintain? – Alisson Reinaldo Silva Dec 22 '17 at 15:43
  • I edited the question. First of all I want to know which one has the better performance. The grid size is 50 row x 9 column. In the future I will add ability to virtual scroll. But the grid size will not change. – Viktor Dec 22 '17 at 15:50
  • It's 5 directives vs 1. Do the math. A single component *possibly* provides better performance. But it's impossible to say for sure without knowing the details. I'd just do the benchmark, much easier and useful than typing the question. – Estus Flask Dec 22 '17 at 15:53
  • @Viktor You know which one has better performance, then why do you ask exactly that. I would go for the app-dynamic-content directive. It is cleaner, more readable and easier to scale. I have chosen it in a pretty big app I work with multiple levels, types etc. and it's fine. – Olezt Dec 22 '17 at 16:07

0 Answers0