Menu
I am trying to build an angular project . In my project I want to show a list of books ,I have a SmallBookView Component for a single book and I want to use ngFor to show many other books./ however after every 3 books I need to add a div to separate this books, In the end it should look like so
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<div class="clearfix"> </div>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<div class="clearfix"> </div>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<div class="clearfix"> </div>
the div separate each line of books in the ui. I am trying to use ngFor like so
<app-small-book-view *ngFor="let i of [1,2,3,4,5,6,7]; let _i = index">
<div class="clearfix" *ngIf="(_i % 3) == 0"></div>
</app-small-book-view>
but this is adding the div only inside the SmallBookView instead of between them, how do I add this div between the components>
988
The ngFor directive does create the HTML-Element it is placed in as many times as there are elements in the array. So to create a list-element for each array element, we place the ngFor directive inside of the li tag.
This is an affiliate link. We may receive a commission for purchases made through this link. To get the index of each element, we can define another variable in the ngFor directive. We can name that variable however we like. Let's call it "i" for now. To get the value of the index, we also need to assign "index" to that variable.
The so-called ngFor directive is a core directive, that comes with the angular framework itself. We can use this directive, if we want to display a dynamic list, for example, an array of elements on the screen.
To reduce DOM-manipulation to a bare minimum, angulars' ngFor directive is heavily optimized. For example, if a element is added to the array, it is not re-rendering the whole list. Instead, all the existing DOM-elements are re-used and only the additional element is created. The same thing happens when a element is removed from the array.
You can use ng-container to group multiple components without the container rendering.
<ng-container *ngFor="let i of [1,2,3,4,5,6,7]; let _i = index">
<app-small-book-view></app-small-book-view>
<div class="clearfix" *ngIf="(_i % 3) == 0"></div>
</ng-container>
This should not be a task for script but rather for CSS:
app-small-book-view:nth-child(3n)::after {
/*the clearfix thing*/
content: "";
clear: both;
display: table;
}
So your markup will be just linear sequence of children:
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
<app-small-book-view></app-small-book-view>
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
