Angular condition slicepipe in a ngfor

Question

I want to know how can I use an conditional slicepipe in an ngFor to control the data displayed ?

For example to choose the number of videos displayed on a list/grid for example like these commons dropdowns :

What I'm trying to do now is:

<app-example
      class="items-list-item"
      *ngFor="let item of datas.video | slice:0:1"
      [itemvideo]='item'>
</app-example>

But how I can do this dynamically when I change the value on the select dropdown ?

Just set the item size to a variable and use it instead of 1. — Berk Kurkcuoglu, Jun 05 '20 at 11:46
Does this answer your question? [Using Slice Pipe with variable parameters in \*ngFor](https://stackoverflow.com/questions/44944570/using-slice-pipe-with-variable-parameters-in-ngfor) — Rachid O, Jun 05 '20 at 11:48

score 5 · Accepted Answer · answered Jun 05 '20 at 11:46

5

You just need to define the variable and assign those values

 start : number = 1;
 end : number = 5;

then change it according to the dropdown value

this.end = yourdropdownval;

and the ngFor will look like,

<app-example class="items-list-item" *ngFor="let item of datas.video  | slice:start:end'>

answered Jun 05 '20 at 11:46

Sajeetharan

Thanks, I could resolve my problem with your answer – Satanas Jun 15 '20 at 09:13

1 Answers1