Limit the Ngfor

Asked

Viewed 844 times

-1

I would like to know how to limit my Ngfor to pass only 6 times??

In my . TS imported this module below...

import { NgForOf } from '@angular/common';

I tried to use it this way below but it didn’t work...

 <div *ngFor="let concessionaria of concessionarias; index as i">
    <vw-component-dealers [concessionaria]="concessionaria" ></vw-component-dealers>        
</div>

typescript angular

1 answer

2


You can use the Slice with ngFor to determine the positions of the list you need, a reference: https://angular.io/api/common/SlicePipe.

<div *ngFor="let concessionaria of concessionarias | slice:0:5 ; index as i"> <vw-component-dealers [concessionaria]="concessionaria" ></vw-component-dealers></div>

In the above case it passes from positions 0 to 5 of the list.

  • It worked perfectly! Just take away one question? Below this Component, there is a button where when clicking it will show 3 more Component following the list passed by Ngfor, that is, if I displayed from 0 to 6, when clicking on the button, 3 more Components following from 7 to 10, and so on!! You could do this using this pipe?

  • To do this, you can use ngIf with ngFor to show on the screen only the elements whose positions you want, the button can serve to change the range values.

  • You can also add a property for your component that increments the values in the Slice from the button event: Slice:0+range:6+range.

  • Here is an example using Slice with the component property: https://embed.plr.co/l1oTNT/

  • The second way worked perfectly!! Thank you

Browser other questions tagged typescript angular

You are not signed in. Login or sign up in order to post.