CODEWITHSUNDEEP
htmlcssangular
chink
chink

Reputation: 1643

change image in a div every 5 seconds in an angular application

Hi I am building an angular application and as part of it, I want to change the image in a div every 5 seconds.

Current code

 <div class="outer_div">
     <img class="ahu_icon" src="../../assets/image1.png">
 </div>

I have a different image - image2.png. I want to display these 2 images one after another every 5 seconds. Can someone help with it?

Thanks

Upvotes: 0

Views: 1122

Answers (1)

Reactgular
Reactgular

Reputation: 54781

You can use an observable that emits the values with a 5 second delay() for each value by using concatMap(), and then repeat().

this.src$ = of('../../assets/image1.png','../../assets/image2.png').pipe(
   concatMap(url => of(url).pipe(delay(5000))),
   repeat()
);

<img class="ahu_icon" [attr.src]="src$ | async">

Upvotes: 1

Related Questions