static source vs. dynamic output

[Raoul Duke]

html templates with for loops. 

never feels right. 

but alternatives all have drawbacks too, duh. 

embodies a basic core problem of software development: we go from static sources with variables (how many items to loop over) to a dynamic result (how long the output is). 

the html situation is worse in that it has the extra dimensions of layout & styling & interactivity. ui is like def one of the hardest things in software development since it has so many intertwined aspects.

 

[Mike Austin]

I definitely prefer the loop outside of the element as in modern Angular or React:

<ul>

  @for (item of items; track item.id) {
    <li>{{ item.name }}</li>
  }

</ul>

<ul>

  {items.map(item => (

    <li key={item.id}>{item.name}</li>

  ))}

</ul>

What if you have multiple items in a loop? In React, you can use fragments. Angular 20, I wonder if it comes for free.

<ul>
  <li *ngFor="let item of items">
    {{ item.name }}
  </li>
</ul>