Angular 2 Conditional loop with * ngIf
I am creating an IONIC 2 application and I need to integrate slides into My Application.
I am having a conditional loop issue for implementation in my HTML. Below is my current code where the loops output the content as many times as the loop is executed.
<!--categories_slider-->
<div class="categories_slider english-font" *ngIf="homeCategories[3].content">
<h4>{{homeCategories[3].name}}</h4>
<!-- -->
<ion-slides pagination="true" autoplay="5000" loop="true" speed="1000" >
<ng-container *ngFor="let slides of homeCategories[3].posts; let i = index">
<ion-slide>
<ion-grid>
<ion-row>
<ion-col col-4>
<div class="categories_slider_image">
<wordpress-feature-media (click)="previewPost(slides)" *ngIf="slides.featured_media" [id]="slides.featured_media"></wordpress-feature-media>
</div>
<h5>{{slides.title.rendered}}</h5>
<p [innerHtml]="slides.title.rendered"></p>
</ion-col>
</ion-row>
</ion-grid>
</ion-slide>
</ng-container>
</ion-slides>
</div>
<!--categories_slider end -->
I need to create a loop such that three ion-col can appear on each ion slide .
As below;
<ion-slide>
<ion-grid>
<ion-row>
<ion-col col-4></ion-col col-4>
<ion-col col-4></ion-col col-4>
<ion-col col-4></ion-col col-4>
</ion-row>
</ion-grid>
</ion-slide>
<ion-slide>
<ion-grid>
<ion-row>
<ion-col col-4></ion-col col-4>
<ion-col col-4></ion-col col-4>
<ion-col col-4></ion-col col-4>
</ion-row>
</ion-grid>
</ion-slide>
How do I create conditional tags to achieve the desired result?
Thanks Sunny
+3
source to share
1 answer
To give you a better answer, I'll need some more information, but basically you need to create an Array of slides where you are going to store the data for the slides and display it using a loop.
<ion-slide *ngFor = slide of slides>
<ion-grid>
<ion-row>
<ion-col col-4>{{ slide.title }}</ion-col col-4>
<ion-col col-4>{{ slide.img }}</ion-col col-4>
<ion-col col-4>{{ slide.something }}</ion-col col-4>
</ion-row>
</ion-grid>
</ion-slide>
I would create a component something like this
imports....;
class Slides {
'title': string = "";
'img': string = "";
'something': string = "";
}
@Component({
selector: 'page-slides',
templateUrl: 'slides.html'
})
export class SlidesPage {
public slides: Slides = new Slides();
constructor....
...
this.slides.push({...})
I hope this helps
0
source to share