Here are the key points from your query:
Is there a way to store the information in a separate file and retrieve it from there?
- Yes, you can store this data in a JSON file on your server or in a database; in my example, I used a JSON file.
I need to dynamically change the text on the left column along with the image for each slide, displaying a date and brief description.
- You can use an object instead of an array of images, including all the necessary fields for your frontend.
relevant JSON file:
{ "imgArray": [
{"img": "https://picsum.photos/id/501/900/500", "heading" :"first", "description":"first heading's description"},
{"img": "https://picsum.photos/id/502/900/500", "heading" :"h2", "description":"second heading's description"},
{"img": "https://picsum.photos/id/503/900/500", "heading" :"h3", "description":"third heading's description"},
{"img": "https://picsum.photos/id/504/900/500", "heading" :"h4", "description":"fourth heading's description"},
{"img": "https://picsum.photos/id/505/900/500", "heading" :"h5", "description":"fifth heading's description"},
{"img": "https://picsum.photos/id/506/900/500", "heading" :"h6", "description":"sixth heading's description"},
{"img": "https://picsum.photos/id/507/900/500", "heading" :"h7", "description":"seventh heading's description"}
]
}
relevant HTML:
<ngb-carousel *ngIf="images">
<ng-template ngbSlide *ngFor="let slide of images; index as i">
<div class='row'>
<div class='col-lg-6 col-md-6 col-sm-6 col-6 '>
<div class="description_date">
<h1>{{slide.heading}}</h1>
</div>
<div class="description_text">
{{slide.description}}
</div>
</div>
<div class='col-lg-6 col-md-6 col-sm-6 col-6'>
<div class="gallery_img">
<figure>
<img [src]="slide.img" alt="Random first slide">
</figure>
</div>
</div>
</div>
</ng-template>
</ngb-carousel>
relevant TS:
import { Component } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
import * as dataJSON from './data.json';
@Component({
selector: 'ngbd-carousel-config',
templateUrl: './carousel-config.html',
providers: [NgbCarouselConfig]
,styles: [`
.img-fluid{ min-width:100%}
.row{background:lightgray;}
.description_date, .description_text { padding:5%; }
`]
})
export class NgbdCarouselConfig {
images:any[] = []
readJSON = dataJSON;
constructor(config: NgbCarouselConfig) {
config.interval = 10000;
config.wrap = false;
config.keyboard = true;
config.pauseOnHover = false;
this.images = this.readJSON.default.imgArray;
}
}
working example here