Angular 11 causing UI flicker upon array modifications

When trying to access an updated array value from the server, I noticed that the UI template is flickering when concatenation occurs. How can this issue be resolved?

@Input('companies') set setCompanyArray(companies) {
     this.showNotFound = false;> 
     if (!companies) {
       return;
     }
     companies.map((company) => {
       company['searchFilter'] = this.lastSearchedText;
    });
    if (!this.companies) {
       this.companies = companies;
       return;
     }
     this.companies = this.companies.concat(companies);

Answer â„–1

When updating the companies variable, you may notice flickering due to Angular re-rendering the entire list. To prevent this, it is recommended to implement trackByFn to inform Angular whether to only render new items or the entire list again.

 <li *ngFor="let company of companies;trackBy: trackByFn"></li>

  trackByFn(index, company: Company) {

    return company.id // or any unique identifier for a company
  }

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

Tips for extracting specific values from JavaScript using jQuery in ASP to be utilized in the C# code behind section

I want to extract the selected values from a multiselect jQuery and use them in the code behind in C#. The script sources can be found at the following link: https://github.com/nobleclem/jQuery-MultiSelect Below is the ASP code I am using: <div class ...

Tips for updating multiple bundled javascript files with webpack

I am working on a straightforward app that requires users to provide specific pieces of information in the following format. Kindly input your domain. User: www.google.com Please provide your vast URL. User: www.vast.xx.com Select a position: a) Bottom ...

Having trouble reaching the angular app when using nginx and istio

I am currently working on setting up an Istio service mesh for a project that involves .NET Core services and Angular 6 as the front end. Interestingly, when I deploy the application with built-in Docker applications, everything runs smoothly. For exampl ...

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Here is the HTML code snippet I am working with: <div> hello world <p> the world is round <img src="domain.com/world.jpg"> </p> </div> I am looking to replace the word "world" (or any mixed case variations) with < ...

Determine which checkbox is currently selected in Vue and send corresponding data based on the checked status

A radio form that is conditionally disabled by another checkbox. One radio button can send either true or false and the other has an input that sends some data. How can I determine which radio button is checked and decide whether to send true/false or the ...

Avoid having the toast notification display multiple times

I've been working on implementing a toast notification for service worker updates in my project. However, I'm facing an issue where the toast notification pops up twice. It seems to be related to the useEffect hook, but I'm struggling to fig ...

Tips for transferring information from one function to another, where the second function acts as an argument within the first function

Can we extract the data from an object map created within a function, such as getData();, and access it in another function called useData(); that is passed as an argument to the original function? const getData = (useData) => { const myData = { ...

What is the best way to ensure only one piece of data is saved in a MongoDB collection?

If there is already existing data in the collection, I prefer not to save any additional data. ...

How can I change the color of a cube in Three.js?

I'm currently working on developing a basic 3D game using three.js. My goal is to create colored cubes, but I'm encountering an issue where all the cubes are displaying the same color. My cube creation code looks like this: var geometry = new ...

Retrieving information from a nested array transferred to Javascipt / Jquery through JSON from PHP / Cakephp

Apologies for the basic question, but after hours of research, the examples I've found don't seem to fit the context of my array. I've successfully passed data from my CakePHP server to my jQuery JavaScript, but I'm struggling to make s ...

Is there a way to retrieve the present time in Shanghai using JavaScript?

I'm working on a small project and need to obtain the current time in JavaScript specifically for Shanghai. Does anyone have any tips or recommendations on how I can achieve this efficiently? ...

Is the client-side JavaScript injected by CasperJS not loading completely?

I am currently loading an include.js file using casper.options.clientScripts.push('./include.js') This include.js script is designed to ensure that all ajax requests are completed. You can find the code for it here. (function(){ window._a ...

What is the best way to retrieve data from mongodb when dealing with duplicate parameters?

I have been attempting to devise criteria for fetching items from a database. Below is the snippet of code that retrieves items from a MongoDB: public List<Location> findByListOfId(List<String> locationsIds){ Query query = new Query(); ...

Retrieve all choices from the dropdown menu (both those that are currently chosen and those that are not

After implementing the following code: $('#select-from').each(function() { alert($(this).val()); }); <select name="selectfrom" id="select-from" multiple="" size="15"> <option value="1">Porta iPhone Auto</option> <opti ...

Troubleshooting the Conflict between Angular Update and Peer Dependency: @angular/[email protected]

I've been attempting to upgrade my Angular 12 application to version 13 following the official upgrade guide, but have run into some trouble. The npm error messages I'm getting are not providing clear explanations of the issue at hand. Here&apos ...

`In NestJS Nested Schema, the @Prop decorator and mongoose options are not applied as expected

I'm currently working on constructing a Schema that includes a nested object. I am trying to define default values and required properties within the nested object, but it seems like the options I set are being ignored. task.entity.ts @Schema() expor ...

"Exploring the world of child components in Angular

I am looking to create a unique component structure with the following syntax: <my-component [attr1]="attr1" [attr2]="attr2"> </my-component> While the basic structure is good, I need the flexibility to render different types of templates wit ...

Utilizing Angular 5: Enhancing ngFor with a Pipe and a Click Event

Iterating through an array of objects using *ngFor, I apply various filters via pipes to manipulate the resulting list. One of these pipes relies on a user input from a search field. Upon clicking on one of the ngFor elements, the corresponding object is p ...

Deactivate input fields when the checkbox is selected

In my ticket purchase form, you are required to fill in all personal information. However, there is an option to purchase an empty ticket without any name on it. This can be done by simply checking a checkbox, which will then disable all input fields. ...

Get a confirmation from Ajax, PHP, and Mysql after successfully inserting data

Here is my AJAX call to submit a form to a MySQL database using a PHP file on a server: <script type"text/javascript"> $(document).ready(function(){ $("form#submit").submit(function() { // storing form values and sending via AJAX var fn ...