Develop Reference

How do you loop through different rows (bootstrap rows) in Angular?

I am asking myself: How would you loop through different rows using *ngFor?
Lets say an array is given
let arr = [1,2,3,4] // arr can have a arbitrary number of elements
Now I want to loop trough that array and display the values. I want two elements to be in a row (using bootstrap 4.0). My approach:
<div class="row">
<div class="col-6" *ngFor="let el of arr"> {{el}} </div>
</div>
Now I would have this html-code
<div class="row">
<div class="col-6"> 1 </div>
<div class="col-6"> 2 </div>
<div class="col-6"> 3 </div>
<div class="col-6"> 4 </div>
</div>
but I want it this way:
<div class="row">
<div class="col-6"> 1 </div>
<div class="col-6"> 2 </div>
</div>
<div class="row">
<div class="col-6"> 3 </div>
<div class="col-6"> 4 </div>
</div>
because this would be correct regarding the elements in a row.
How can I achieve this?

You can achieve it without second loop provided col-6 is fixed.
<div>
<ng-container *ngFor="let el of arr; index as i">
<div class="row" *ngIf="i%2 === 0">
<div class="col-6" > {{arr[i]}} </div>
<div class="col-6" > {{arr[i+1]}} </div>
</div>
</ng-container>
</div>
This will do as you are expecting.

Option 1
The quickest option would be to use the slice pipe. But it might not be suitable for large data sets.
<div class="row">
<div class="col-6" *ngFor="let el of arr | slice:0:2"> {{el}} </div>
</div>
<div class="row">
<div class="col-6" *ngFor="let el of arr | slice:2:4"> {{el}} </div>
</div>
Option 2
Split the array into chunks of arrays and loop through them.
Controller
export class AppComponent {
arr = [1,2,3,4];
finalArr = []; // <-- [[1,2], [3,4]]
constructor(private http: HttpClient){
for (let i = 0, j = this.arr.length; i < j; i += 2) {
this.finalArr.push(this.arr.slice(i, i + 2));
}
}
}
Template
<div class="row" *ngFor="let arr of finalArr">
<div class="col-6" *ngFor="let el of arr"> {{el}} </div>
</div>

From the pattern it looks like a outer and a inner loop will solve the problem.
outer loop will control the "row" - div
inner loop will control the "col-6" - div
Kindly give it a try.

Make eventlistener loop through buttons array

Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!

In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");

Wrap every nth piece of content with 2 divs in javascript

I am trying to wrap two divs around every 3 pieces of content generated from an API call. It should look like this:
<div class="carousel-inner">
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (1)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (2)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (3)
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
I have worked on this all day and I can't seem to get it right. Also, I may not be using the most efficient method. I am hoping that someone can tell me what I am doing wrong and how to fix it... also, I am open to any advice as far as streamlining my code. So, with this search 4 pieces of content are returned, and every set of 3 should be wrapped in two divs (item carousel-item and row), but in my attempt below, it seems to be wrapping correctly, but it surrounds 4 instead of three and then brings back a duplicate piece of content for the 4th, I also have an extra div at the end... yikes :)
What I have it doing so far:
<div class="carousel-inner">
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
Content Here (1)
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (2)
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (3)
</div>
</div>
</div>
***this div should not be here, should have stopped at 3***
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
<div class="item carousel-item">
<div class="row">
<div class="col-sm-4">
<div class="thumb-wrapper">
<div class="img-box">
Content Here (4)
</div>
</div>
</div>
</div>
</div>
</div>
***extra div shows up at end***
</div>
Here is the code I used:
jQuery.each(ws_ftr, function(index, ftr) {
if(index % 3 === 0){
jQuery('.carousel-inner').append('<div class="item carousel-item active"><div class="row">');
}
jQuery('.row').append('<div class="col-sm-4"><div class="thumb-wrapper"><div class="img-box">Content Here</div></div></div>');
if(index % 3 === 0){
jQuery('.row').append('</div></div>');
}

your code should be like
function createColumnsList(arr) {
var html = '<div class="row">';
//or another code to start your row like $.append or smth
$.each(arr, function(index, item) {
if (index % 3 == 0 && index != 0) {
html += '</div><div class="row">';
//end and start your row
}
html += '<div class="column">' + item + '</div>';
// output your content from array
});
html += "</div>";
//end row
return html;
}
Change it to fit your needs. Hope it will help you :)

display json data from array

I'm trying to display some json data I got from a get request. So far I've been able to display other arrays with no problem, but I'm having trouble displaying this particular array for some reason, and I'm not getting any errors.
the one that won't display correctly is the showtimes array.
<div *ngIf="show">
<div *ngFor="let shows of show"class="showtime">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{shows.title}}</h3>
</div>
<div class="panel-body" >
<div class="row">
<div class="col-md-7 col-sm-5 col-xs-12 ">
<img class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br>
</div>
<div class="col-md-5 col-sm-7 col-xs-12">
<ul class="list-group">
<li class="list-group-item">Genres: {{shows.genres}}</li>
<li class="list-group-rel">Release Date: {{shows.releaseDate}}</li>
<li class="list-group-rel">{{shows.longDescription}}</li>
<li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

You are missing {{}} expression
<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li>
EDIT
Change it to some other variable name, since you are already using shows,
<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li>

As it looks from your snapshot, the array of objects is stored in variable showtimes, if that is the case, try the below code:
<li *ngFor="let detail of showtimes" class="list-group-rel">
{{detail.theatre.name}}
</li>

A nested ngFor loop solved the problem..
<div *ngFor="let shows of show">
<div *ngFor="let detail of shows.showtimes">
<p>{{detail.theatre.name}}</p>
</div>
</div>
works perfectly, thanks for the help

Show / Hide Nested Divs inside ng-repeat

I have a div with sub divs to create a nested grid system.
There are three levels in total:
MainDiv - Always Visible
SecondDiv - Show or hide when clicked on MainDiv
ThirdDiv - Show or hide when clicked on SecondDiv
<div class="container padding" style="background-color: #fff;" ng-controller="MyCtrl">
<div class="row">
<div class="col col-75" >
Department / Product Type
</div>
<div class="col col-25">
Qty
</div>
</div>
<div ng-repeat="item in departments | orderBy:'-qty'" style="padding:0px;margin: 0;">
<div class="row" ng-class-odd="'odd'" ng-class-even="'even'">
<div class="col col-75" style="padding:0;margin:0;">
{{item.departmentName}} - {{item.productTypeName}} - Need Click here
</div>
<div class="col col-25" align="center" valign="middle" style="font-size: 14px;font-weight:bold;padding:0;margin:0;">
{{item.qty}}
</div>
</div>
<div ng-repeat="style in item.styles" style="padding:0;margin: 0;">
<div class="row">
<div class="col" style="margin-left: 5% !important;border-top-width:0;border-bottom-width:0;">
{{style.styleNum}} ({{style.qty}}) - Need Click here
</div>
</div>
<div class="row" ng-attr-id="{{ 'level-2-' + $index }}">
<div class="col col-5" style="border:0"></div>
<div class="col col-5" style="border-left:0;border-bottom:0;border-right:0;"></div>
<div class="col col-25">Color</div>
<div class="col col-25">Size</div>
<div class="col">Product#</div>
</div>
<div ng-repeat="styleLine in style.details">
<div class="row">
<div class="col col-10" style="border:0;"></div>
<div class="col col-25">{{styleLine.color}}</div>
<div class="col col-25">{{styleLine.size}}</div>
<div class="col">{{styleLine.productNum}}</div>
</div>
</div>
</div>
</div>
</div>
Now I need to add a click event on the div to show hide the necessary nested divs.
Plunker: http://plnkr.co/z3RiV6cDFC6YjrbuqxN9

Generic example using ng-init and ng-click:
<div ng-repeat="obj in items" ng-init="show = false">
<div ng-click="show = !show"></div>
<div ng-repeat="sub in obj.children" ng-show="show">
<p>Hello World!</p>
</div>
</div>