angular limit number of rows in table using ngFor

Question

I'm using angular 6 in my project. I want to display just 5 rows in my table. I'm using ngFor and my code looks like this:

<tbody>
    <tr *ngFor="let item of routines; let i = index">
         <td style="display: none">{{item.rid}}</td>
         <td>{{item.name}}</td>
         <td>{{item.muscle_area}}</td>
    </tr>
</tbody>

How do I go about in doing this?

Answer 1

Just slice

<tbody>
    <tr *ngFor="let item of routines.slice(0, 5); let i = index">
         <td style="display: none">{{item.rid}}</td>
         <td>{{item.name}}</td>
         <td>{{item.muscle_area}}</td>
    </tr>
</tbody>