ngx-gallery not display image - angular7

Question

Angular 7 ngx-gallery
I was able to take data in json format without any errors, but ngx-gallery doesn't seem, it loaded in the element in the page details but the images and the ngx-gallery template do not appear ,
It may not be taking photos from the service, but didn't make a mistake,
here is my code :
import {
NgxGalleryOptions,
NgxGalleryImage,
NgxGalleryAnimation
} from "ngx-gallery";
#Component({
selector: "app-city-detail",
templateUrl: "./city-detail.component.html",
styleUrls: ["./city-detail.component.css"],
providers: [CityService]
})
export class CityDetailComponent implements OnInit {
constructor(
private activatedRoute: ActivatedRoute,
private cityService: CityService
) {}
city: City;
photos: Photo[] = []
galleryOptions: NgxGalleryOptions[];
galleryImages: NgxGalleryImage[];
ngOnInit() {
this.activatedRoute.params.subscribe(params => {
this.getCityById(params["cityId"]);
});
}
getCityById(cityId) {
this.cityService.getCityById(cityId).subscribe(data => {
this.city = data;
this.getPhotosByCity(cityId)
});
}
getPhotosByCity(cityId){
this.cityService.getPhotosByCity(cityId).subscribe(data=>{
this.photos = data;
this.setGallery();
})
}
getImages(){
const imageUrls= []
for(let i = 0;i<this.city.photos.length;i++){
imageUrls.push({
small:this.city.photos[i].url,
medium:this.city.photos[i].url,
big:this.city.photos[i].url
})
}
return imageUrls;
}
setGallery(){
this.galleryOptions = [
{
width: '100%',
height: '400px',
thumbnailsColumns: 4,
imageAnimation: NgxGalleryAnimation.Slide
},
// max-width 800
{
breakpoint: 800,
width: '100%',
height: '600px',
imagePercent: 80,
thumbnailsPercent: 20,
thumbnailsMargin: 20,
thumbnailMargin: 20
},
// max-width 400
{
breakpoint: 400,
preview: false
}
];
this.galleryImages = this.getImages()
}
}
Template:
<ngx-gallery *ngIf="galleryImages" [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>

Answer 1

this tutorial is complete
https://github.com/lukasz-galka/ngx-gallery-demo/blob/master/src/app/app.component.ts
use method addImage for your problem
help this image
private loadAll() {
this.imageService.getAllImage).subscribe(result => {
this.addImage(result);
});
}
addImage(images: any[]): void
images.forEach(image=>{
this.onlyPreviewExample.images.push(this.getImage(this.getRandomInt(1,2),doc));
});
}
private getImage(index: number, image?: any): NgxGalleryImage {
return {
big: 'imageUrl'
}
}
private getImages(): NgxGalleryImage[] {
let images = new Array<NgxGalleryImage>();
return images;
}
private getRandomInt(min: number, max: number) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
ngOnInit() {
this.ngxGalleryModel = new Array<NgxGalleryModel>();
this.ngxGalleryModel.push(
this.onlyPreviewExample = new NgxGalleryModel('Only preview', this.getImages(), [{
image: false,
thumbnails: false,
previewCloseOnClick: true,
previewCloseOnEsc: true,
previewZoom: true,
previewRotate: true,
// previewDownload: true,
previewFullscreen: true,
previewKeyboardNavigation: true,
arrowNextIcon: "fa fa-arrow-left",
arrowPrevIcon: "fa fa-arrow-right",
fullscreenIcon: "fa fa-arrows-alt",
width: '0px',
height: '0px'
}])
)
}
#ViewChild('onlyPreviewGallery', {static: false}) onlyPreviewGallery: NgxGalleryComponent;
ngxGalleryModel: NgxGalleryModel[];
onlyPreviewExample: NgxGalleryModel;