I am currently working on a project where I need to fetch images from a service and store them in an array. The goal is to create a sliding image feature within my application using this array.
Below is the component file:
import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
head_slider: any = [];
imgslider: any = [];
constructor( public http: HttpClient ) { }
slides = [ ];
slideConfig = {'slidesToShow': 4, 'slidesToScroll': 4};
ngOnInit() {
this.http.get('https://newsapi.org/v2/top-headlines?country=in&apiKey=69e4c9820959482e8c40e42f8bcfe975').subscribe(data => {
this.head_slider = data['articles'];
console.log(this.head_slider);
this.slides.push( 'img :' + this.head_slider.urlToImage);
});
}
addSlide() {
this.slides.push({img: 'http://placehold.it/350x150/777777'});
}
removeSlide() {
this.slides.length = this.slides.length - 1;
}
afterChange(e) {
console.log('afterChange');
}
}
The objective of the code above is to extract key-value pairs containing images from the service and push them into an array named slides = [ ]; , In this format --- > slides = [ img: , img: , img: ];
Here is the HTML file corresponding to the component:
<ngx-slick class="carousel" #slickModal="slick-modal" [config]="slideConfig" (afterChange)="afterChange($event)">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<img src="{{ slide.img }}" alt="" width="100%">
</div>
</ngx-slick>
<button (click)="addSlide()">Add</button>
<button (click)="removeSlide()">Remove</button>
<button (click)="slickModal.slickGoTo(2)">slickGoto 2</button>
<button (click)="slickModal.unslick()">unslick</button>