In my angular project, I'm implementing a marquee feature to display data fetched from an API. However, I've noticed a strange issue where after a page reload, the marquee starts from right to left but once it reaches the end of the div, it resets and restarts from the right instead of creating an infinite loop. This behavior only occurs on the first load after a page refresh, and it works fine after that. Strangely, this issue only occurs when fetching text through the API - hardcoding the text directly into the marquee tag works flawlessly.
header.component.html div
<div style="width: 50%;font-size: 2rem; font-weight: 500; font-family: serif; color: #4E5E6A;">
<marquee>{{announcement}}</marquee>
</div>
header.component.ts
ngOnInit() {
const apiurl = environment.applicationRestApiId + "/fetchHeaderAnnouncement";
this.shared.fetchHeaderAnnouncement(apiurl).subscribe(data => {
this.announcement = data;
},error => {
console.log("Error while fetching Announcement");
});
}
shared.service.ts
fetchHeaderAnnouncement(url: string) :Observable<string> {
return this.http.get(url,
{responseType: 'text'}
);
}
To avoid inconsistencies in speed based on text length, I opted not to use CSS animation which requires setting a specific duration. This issue only arises when using the marquee tag directly.