The marquee's position is reset the first time text is loaded dynamically from an API

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.

Answer №1

If you want to bypass this restriction, consider inserting the text twice. However, keep in mind that the marquee tag is outdated and should be used cautiously as it may become ineffective in the future.

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="width: 100%;font-size: 2rem; font-weight: 500; font-family: serif; color: #4E5E6A;">
    <marquee><span>{{announcement}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{{announcement}}</span></marquee>
</div>
  `,
})
export class App {
  announcement = 'Lorem Ipsum is simply dummy text';
}

bootstrapApplication(App);

Check out this Stackblitz Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After deploying to Heroku, cal-heatmap encounters errors despite functioning correctly in a local environment

I successfully implemented a cal-heatmap instance in my Angular 2 (angular-cli) project locally, but when I deployed the project to Heroku, I encountered some errors that prevent the cal-heatmap from displaying. https://i.stack.imgur.com/8gY90.png The er ...

How can I integrate keydown.control with a unique click function in Angular?

Is there a way to choose multiple number elements in random order and save them to an array by holding down the control key (CTRL) and clicking on the element? For example, selecting 2 and 4 out of 5. I tried different methods but couldn't figure out ...

What is the best way to ensure a div element on a printed page has a space between its bottom edge and the physical paper, as well as a space between its top

Within my div element lies a collection of other div elements. These elements contain lengthy text that may span multiple pages. I am attempting to print this text starting 50mm from the top edge of every physical paper, and stopping 20mm before the edge o ...

Exploring the Power of Angular 5 in Sharepoint Development with SPFX

Utilizing Angular 5 with the SharePoint SPFX Framework has been a breeze for me so far. However, I've encountered an issue when it comes to including Polyfills. I attempted to add the js files in the externals without success. Additionally, importing ...

Concealing hyperlinks depending on authentication status in Angular 2

How can I hide the Navbar links instantly based on user authentication without the need for a page refresh? SampleComponent.html <div class="content"> <md-toolbar> <md-icon>menu</md-icon> <span class="fill-s ...

Typescript custom sorting feature

Imagine I have an array products= [{ "Name":'xyz', 'ID': 1 }, { "Name":'abc', 'ID': 5 }, { "Name":'def', 'ID': 3 } ] sortOrder=[3,1,5] If I run the following code: sortOrder.forEach((item) =&g ...

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

Lose yourself in the horizontal beauty of the CSS menu

Currently, I am working on an application using ASP.Net MVC4, jquery 1.9, and CSS 2.1. However, I have encountered an issue with the horizontal menu display. Whenever a form with a jquery component is shown, some buttons seem to disappear behind the menu, ...

Is it TypeScript's return type a double arrow (Observable)?

I'm having a hard time understanding this: const loadData: (detailsStore: RecipeDetailsStore) => (source$: Observable<string>) => Observable<RecipeDetails> How should I interpret this? My understanding is: loadData is a function t ...

Creating an adaptable image with CSS or Material UI

Is it possible to create a responsive image that shifts from the top right position to the bottom as the size decreases? I've been using Material UI but haven't found any guidance on how to achieve this. .my-photo{ height: 300px; positio ...

Dividing an AngularJS module across multiple iFrames on a single webpage

Currently, I am working on a web application that consists of 1 module, 5 pages, and 5 controllers. Each HTML page declares the same ng-app. These pages are loaded within widgets on a web portal, meaning each page is loaded within an iFrame in the portal. ...

Creating a modal dialog using a function in a TypeScript file

Hey there, fellow developers! I have a question that might seem simple. So, in my HTML code I've got a Modal Dialog that pops up using ng2 Bootstrap. It's working fine, but... I want to replace this line of code "<button class="btn btn-prim ...

Techniques for importing esm libraries without requiring the "type": "module" declaration in the package.json configuration file

I have successfully implemented a TypeScript Node project but now I am facing an issue while trying to integrate the VineJS library into the project. The problem arises because VineJS is exclusively an ESM (ECMAScript Module) package, and when adding it to ...

Input tag paired with a date picker

Instead of using the <label>{{list.createdat | date: 'dd.MM.yyyy'}}</label> tag, I want to change it to an input tag to create a simple datepicker: <input type="date"/> The issue is that the data in the <label> tag is pa ...

What is the best choice for a package.json file in an ASP.NET MVC project: devDependencies or dependencies?

I am currently in the process of developing an ASP.NET Core 2.0 MVC application and incorporating Angular 4 into it. To manage my dependencies, I have set up a configuration file named package.json in the root directory. Instead of using angular-cli, I ha ...

Having trouble with JavaScript's Date.getUTCMilliSeconds() function?

I have a straightforward question for you. Take a look at this Angular App and try to create a new date, then print the number of UTC milliseconds of that date in the console. Can you figure out why it is returning zero? ...

Eliminate the loading screen in Ionic 2

Within my app, there is a button that triggers the opening of WhatsApp and sends a sound. Attached to this button is a method that creates an Ionic loading component when clicked. The issue I am facing lies with the "loading.dismiss()" function. I want the ...

Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere. Jquery: if ($('.lgi_btn_cta_toggle').hasClass('lgi_ct ...

Using a timer to make Ajax calls twice on a single webpage

Can multiple ajax calls be made simultaneously on the same page to different receiving div tags? I am struggling to find a solution to this issue. I have a total of 3 pages: a home page, and two PHP pages named status and alert which echo the results. Wi ...

Calculating the sum of all elements in an array

Hi, I am currently attempting to retrieve the total value from an array (such as Arr[1] + Arr[2], and so forth). Unfortunately, I am struggling to find a solution. Below is my existing function: this.hourlyTotals = function() { var custsperhour = Math ...