Menu
I have this code:
<div class="row list-group">
<div *ngFor="let product of products" >
<app-product [product]="product"></app-product>
</div>
</div>
I was wondering is there any way i can get products from array in buckets? Something like this:
<div class="list-group">
<div *ngFor="products; index+3" >
<div class="row">
<app-product [product]="products[index]"></app-product>
<app-product [product]="products[index+1]"></app-product>
<app-product [product]="products[index+2]"></app-product>
</div>
</div>
</div>
That way I could have all elements i need in a row
UPD
Thanks to Teddy Sterne I ended up with this solution:
<div class="list-group">
<div *ngFor="let product of products;let i = index">
<div class="row" *ngIf="i%3===0">
<app-product [product]="products[i]"></app-product>
<div *ngIf="products[i + 1]">
<app-product [product]="products[i + 1]"></app-product>
</div>
<div *ngIf="products[i + 2]">
<app-product [product]="products[i + 2]"></app-product>
</div>
</div>
</div>
</div>
575
The syntax is *ngFor="let <value> of <collection>" . <value> is a variable name of your choosing, <collection> is a property on your component which holds a collection, usually an array but anything that can be iterated over in a for-of loop.
The <ul> tag is not filled by those <li> tag created by *ngFor which makes the "line" of the timeline disappear.
In *ngFor the * is a shorthand for using the new angular template syntax with a template tag, this is also called structural Directive.It is helpful to know that * is just a shorthand to explicitly defining the data bindings on a template tag. Follow this answer to receive notifications.
In angular 2 NgFor is the replacement of it. NgFor with component element is used as follows. In the above code snippet, component property binding is taking place for each element in iteration. Now we will discuss complete example of NgFor here on this page step by step using TypeScript. Find the software used in our demo. 1. Angular 2.3.0 2.
Inside the ngFor expression, we defined another variable called i which gets assigned the index keyword which simply contains the current index of each element in each iteration. And we used interpolation to display the value of the i and movie.title variables.
Angular provides the reserved index keyword inside the ngFor expression which can be used as follows: import { Component } from '@angular/core'; @Component({ selector: 'app-movies-list', template: ` <ul> <li *ngFor="let movie of moviesArr; let i = index"> - </li> </ul> ` }) export class MoviesListComponent { /*...
Edit: Thanks to Christopher Moore : Angular exposes the following local variables: Ah, ok. You can also do that. Instead of let i = index, just change it to let first = first; and change the [checked] binding to just check "first" instead of "i == 0".
Angular does not provide this functionality out of the box. I think that the simplest way to achieve the desired result is to only display data on every third index like so:
<div class="list-group">
<div *ngFor="let p of products; let idx = index" >
<div class="row" *ngIf="idx % 3 === 0">
<app-product [product]="products[idx]"></app-product>
<app-product [product]="products[idx+1]"></app-product>
<app-product [product]="products[idx+2]"></app-product>
</div>
</div>
</div>
For index try this:
Controller File add function :
chunks(array, size) {
let results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
};
In you view file :
<div *ngFor="let chunkProduct of chunks(products,3);" >
<div class="row">
<app-product *ngFor="let product of chunkProduct" [product]="product"></app-product>
</div>
</div>
This will work for all number , not only %3 numbers.
@Teddy Sterne's solution will work incase of the number is %3 If we have 8 products it will show only 6 last 2 will be lost , in this it will also be shown.
And it will create extra blank div tags for not %3 index , if you inspect the element and check , because it will loop through each product and div will get repeated no matter if its index %3 or not.
4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
