How to add a new row every nth loop in Angular @for?

I want to create a new row every 6 iterations of a loop, but because I have a div tag in an if with no closing div, I'm getting an error.

What is the correct, "Angular 19" way to do this?

<div class='container'>
@for(role of userRoles; track role.id){
@if(+role.id % 6 === 0){
<div class="row">
} <<<<<< Error here <<<<<<<
<div class="col-2">
{{role.name}}
</div>
@if(+role.id % 6 === 5){
</div>
}
}
</div>


The error is:

Unexpected closing block. The block may have been closed earlier. If you meant to write the } character, you should use the "}" HTML entity instead.ngtsc(-995002)
​

Continue reading...