Styjun

Does two puncture wounds mean venomous snake?

Look mom! I made my own (Base 10) numeral system!

Non-OR journals which regularly publish OR research

Ex-contractor published company source code and secrets online

Are any jet engines used in combat aircraft water cooled?

Write an interpreter for *

Why did Gandalf use a sword against the Balrog?

Dereferencing a pointer in a 'for' loop initializer creates a segmentation fault

How can I iterate this process?

Why are Gatwick's runways too close together?

Why couldn't soldiers sight their own weapons without officers' orders?

In reversi, can you overwrite two chips in one move?

What's this thing in a peltier cooler?

How do I calculate the difference in lens reach between a superzoom compact and a DSLR zoom lens?

Why doesn't the "actual" path matter for line integrals?

Why should we care about syntactic proofs if we can show semantically that statements are true?

Unique combinations of a list of tuples

Which likelihood function is used in linear regression?

Double blind peer review when paper cites author's GitHub repo for code

Are there any differences in causality between linear and logistic regression?

How to use grep to search through the --help output?

(11 of 11: Meta) What is Pyramid Cult's All-Time Favorite?

What word can be used to describe a bug in a movie?

Does a code snippet compile? Or does it get compiled?

Dynamic Carosel images not showing with ngFor (Angular 7)

Angular HTML binding@Directive v/s @Component in AngularHow can I get new selection in “select” in Angular 2?How to apply filters to *ngFor?*ngIf and *ngFor on same element causing errorAngular 2 Show and Hide an elementngFor with index as value in attributeaccess key and value of object using *ngForHuge number of files generated for every Angular projectangular viewChild for dynamic elements inside ngFor

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I am setting up a carousel for showing dynamic images fetching from an Node API. I am using ngFor directive in Angular 7

Here is my code that i have tried:

TypeScript:

getPromotions() 
 this.dashboardService.getPromotions()
 .subscribe(res => 

 this.promotions = res.listings.map(res => 
 return image: `data:$
 res.file_mime_type
 ;base64,$this.dashboardService.bufferToString(res.file_content.data)`
 );


 console.log('Promotions::', this.promotions);

 , err => 

 )
 

html:

<div class="card">
 <div class="card-body">
 <ngb-carousel>
 <ng-template ngbSlide *ngFor="let promotion of promotions">
 <img [src]="promotion.image" height="392" class="d-block w-100" alt="Random slide">
 <div class="carousel-caption">
 <h3>No Promotion</h3>
 <p>There is not active Promotion.</p>
 </div>
 </ng-template>
 </ngb-carousel>
 </div>
</div>

This code should show the images in promotions array but it showing nothing.

angular typescript bootstrap-4 carousel ngfor

share|improve this question

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Meaby ngb-carousel load templates only on init, when there is no data inside this.promotions?
  
  – Patryk Uszyński
  Mar 27 at 7:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PatrykUszyński i have tried with image with index 0 in the promotions array. and It showing that image. but problem with this for loop i think
  
  – Nabeel Ahmad Khan
  Mar 27 at 8:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  same issue. did u find any solution @NabeelAhmadKhan
  
  – Gvs Akhil
  May 26 at 13:32
  

  
  
  
  

add a comment | 

0

I am setting up a carousel for showing dynamic images fetching from an Node API. I am using ngFor directive in Angular 7

Here is my code that i have tried:

TypeScript:

getPromotions() 
 this.dashboardService.getPromotions()
 .subscribe(res => 

 this.promotions = res.listings.map(res => 
 return image: `data:$
 res.file_mime_type
 ;base64,$this.dashboardService.bufferToString(res.file_content.data)`
 );


 console.log('Promotions::', this.promotions);

 , err => 

 )
 

html:

<div class="card">
 <div class="card-body">
 <ngb-carousel>
 <ng-template ngbSlide *ngFor="let promotion of promotions">
 <img [src]="promotion.image" height="392" class="d-block w-100" alt="Random slide">
 <div class="carousel-caption">
 <h3>No Promotion</h3>
 <p>There is not active Promotion.</p>
 </div>
 </ng-template>
 </ngb-carousel>
 </div>
</div>

This code should show the images in promotions array but it showing nothing.

angular typescript bootstrap-4 carousel ngfor

share|improve this question

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Meaby ngb-carousel load templates only on init, when there is no data inside this.promotions?
  
  – Patryk Uszyński
  Mar 27 at 7:52
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @PatrykUszyński i have tried with image with index 0 in the promotions array. and It showing that image. but problem with this for loop i think
  
  – Nabeel Ahmad Khan
  Mar 27 at 8:06
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  same issue. did u find any solution @NabeelAhmadKhan
  
  – Gvs Akhil
  May 26 at 13:32
  

  
  
  
  

add a comment | 

I am setting up a carousel for showing dynamic images fetching from an Node API. I am using ngFor directive in Angular 7

Here is my code that i have tried:

TypeScript:

getPromotions() 
 this.dashboardService.getPromotions()
 .subscribe(res => 

 this.promotions = res.listings.map(res => 
 return image: `data:$
 res.file_mime_type
 ;base64,$this.dashboardService.bufferToString(res.file_content.data)`
 );


 console.log('Promotions::', this.promotions);

 , err => 

 )
 

html:

<div class="card">
 <div class="card-body">
 <ngb-carousel>
 <ng-template ngbSlide *ngFor="let promotion of promotions">
 <img [src]="promotion.image" height="392" class="d-block w-100" alt="Random slide">
 <div class="carousel-caption">
 <h3>No Promotion</h3>
 <p>There is not active Promotion.</p>
 </div>
 </ng-template>
 </ngb-carousel>
 </div>
</div>

This code should show the images in promotions array but it showing nothing.

angular typescript bootstrap-4 carousel ngfor

share|improve this question

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges

getPromotions() 
 this.dashboardService.getPromotions()
 .subscribe(res => 

 this.promotions = res.listings.map(res => 
 return image: `data:$
 res.file_mime_type
 ;base64,$this.dashboardService.bufferToString(res.file_content.data)`
 );


 console.log('Promotions::', this.promotions);

 , err => 

 )
 

<div class="card">
 <div class="card-body">
 <ngb-carousel>
 <ng-template ngbSlide *ngFor="let promotion of promotions">
 <img [src]="promotion.image" height="392" class="d-block w-100" alt="Random slide">
 <div class="carousel-caption">
 <h3>No Promotion</h3>
 <p>There is not active Promotion.</p>
 </div>
 </ng-template>
 </ngb-carousel>
 </div>
</div>

angular typescript bootstrap-4 carousel ngfor

angular typescript bootstrap-4 carousel ngfor

share|improve this question

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges

share|improve this question

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges

asked Mar 27 at 7:40

Nabeel Ahmad KhanNabeel Ahmad Khan

1344 bronze badges