I’m working on this marquee in my angular application. I am getting data by calling an API and showing that text in marquee, but when the page reloads and the marquee starts from right to left, as it reaches the end of div, the marquee kind of resets and restarts from right instead of giving an infinite loop. This only happens the first time after page reloads then it works fine. Also it only happens when bringing text through API, if I hard code some text in marquee tag, it works fine

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'}
    );
  }

I’m not using CSS animation because you have to set seconds in it. The speed keeps changing as per the length of text. This doesn’t happen on using the marquee tag only.