Best practices for updating content within div elements using Angular's ngFor directive

Question

Best practices for updating content within div elements using Angular's ngFor directive

My List consists of integer array type values, being displayed using *ngFor:

<div *ngFor="let item of values; let i = index">
  <div> 
     <div *ngFor="let subitem of item;" style="display:block">
       <div class="progress">
            <div class="progress-bar" id="progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" [style.width.%] = "subitem">
              {{subitem}}
            </div> 
       </div>
       <br>
   </div>
</div>

To avoid unnecessary creation of div elements, I aim to show the list contents within a single div after a delay, rather than repeated iterations.

angular typescript

Answer 1

Answer №1

To achieve the same outcome, you can use the code snippet below:

    <div class="progress">
        <div class="progress-bar" id="progress" role="progressbar" aria-valuenow="70" 
                 aria-valuemin="0" aria-valuemax="100" [style.width.%] = "subitem">
          {{subitem}}
        </div> 
    </div>

This is how it can be implemented in TypeScript:

  for(let i=0; i <= item.length; i++) {
     setTimeout((subitem) => {
        this.subitem = subitem;
      },i * yourTimeOfIntervale, item[i])
  }

Answer 2

To achieve the same outcome, you can use the code snippet below:

    <div class="progress">
        <div class="progress-bar" id="progress" role="progressbar" aria-valuenow="70" 
                 aria-valuemin="0" aria-valuemax="100" [style.width.%] = "subitem">
          {{subitem}}
        </div> 
    </div>

This is how it can be implemented in TypeScript:

  for(let i=0; i <= item.length; i++) {
     setTimeout((subitem) => {
        this.subitem = subitem;
      },i * yourTimeOfIntervale, item[i])
  }

Best practices for updating content within div elements using Angular's ngFor directive

Answer №1

Similar questions

I am not sure where the file is stored between selecting it for upload and actually uploading it

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

Conceal a specific segment on the web page if the API call in Angular does not return any data

Angular 12 experiencing CSS alignment issues

Angular keeps the routing parameters consistent throughout

Is it possible to assign an alternative name for the 'require' function in JavaScript?

Applying the spread operator in the map function for copying objects

Customized IntelliSense naming for overloaded parameters with conditional tuple types

Enhancing a component with injected props by including type definitions in a higher-order component

Which is better in Angular2: defining default property values in the constructor or inline?

When attempting to compile the building project following the upgrade to Angular 9, an error message is displayed stating "Unable to access property 'length' as it is undefined

Effortlessly apply mapping, filtering, reducing, and more in JavaScript

Allowing cross-origin resource sharing (CORS) in .NET Core Web API and Angular 6

Angular resolver does not return anything if the outcome is an observable generated using the .asObservable() method

Obtain document via Angular 2

Breaking down an array into function arguments in TypeScript/JavaScript

How to ensure Angular mat-button-toggle elements are perfectly aligned within their respective groups

Bring life to the angular page

Create an interface object in TypeScript with no initial properties

Encountering TS2304 error message while running TypeScript files indicates the inability to locate the name 'PropertyKey', in addition to another error - TS2339