CODEWITHSUNDEEP
angular
Jordan Frankfurt
Jordan Frankfurt

Reputation: 344

Should *ngFor be used by templates internally, or should it be used externally?

I've seen *ngFor used to repeat child templates from the parent template, and also seen it used inside the child template itself. Is there a situation in which either of these should be preferred?

<div class="results">
  <app-result-tile
    *ngFor="let d of service.data"
    [data]="d">
  </app-property-tile>
</div>

or should I do move the ngFor into the <app-result-tile> component?

<div class="results">
  <app-result-tiles
    [data]="service.data"> <!-- results now repeat internally with li's or something.-->
  </app-result-tiles>
</div>

I'll be writing a pipe to filter the result component(s) from the parent component. Would it make more sense to use the first method in this case?

Upvotes: 2

Views: 85

Answers (2)

danday74
danday74

Reputation: 56936

the question here is should the iterated item form a separate component or not.

The answer is YES IF the iterated item would be used on its own.

If it would ALWAYS without exception, both now and in the future, never be used on it own but always within a list, THEN the ngFor* should be used inside the child component.

If there is a pipe filtering or not on the ngFor* is irrelevant.

Upvotes: 1

micronyks
micronyks

Reputation: 55443

Both are valid. It depends on your usecase.

Former one would create different instances of app-result-tiles component and so relevant number of templates as well while later one would create one instance of your component and a single template.

Upvotes: 3

Related Questions