How to get the ordered index after changing values in an array in angular?

I am having a list of items in an array say,


Whose index would be,


Here i am using angular dragula which is used to drag and drop a list element. With the usage of dragula i am changing the position of an array say,


The order is getting changed but whereas the index position is still the same like,


Here the index position is not in the order and its looking like the older index value despite of the order it looks like. Whereas i need to have the same index position whatever change happen inside an array which means always the index position should start from 0,1,2,... so on even there is a change in the order.

Html component that i have used,

    <div class="card-content">
        <div dropDirective (dropEvent)="addDropItem($event)" class="droppable" [dropHighlight]="'highlight'">
            <div [dragula]="'second-bag'">
                <app-generic-drop-box *ngFor="let item of itemsDropped; index as i" (editBtn)='editBtn($event)' (deleteBtn)='deleteBtn($event)' [genericBox]='item' class="arrow_box dropItem temp" (click)='indexOfItem(i)'> </app-generic-drop-box>

In ts file,

        import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ViewContainerRef, OnDestroy } from '@angular/core';
        import { Router, ActivatedRoute } from '@angular/router';
        import { ScenarioMapService } from '../scenario-map.service';

        import { DynamicFormModel } from '../dynamic-form-config/dynamic-form-model';
        import { Textbox } from '../dynamic-form-config/textbox';
        import { CONFIG } from '../../app.config';

          selector: 'app-drop-area',
          templateUrl: './drop-area.component.html',
          styleUrls: ['./drop-area.component.scss']
        export class DropAreaComponent implements OnInit, OnDestroy {

        indexOfItem(i) {


Here console.log(i) shows the index position if user click on a list if i change the position of an array i need to get the ordered index after the change like 0,1,2,3... .. Kindly help me to achieve the result.



To reset the index in AngularJS array you could filter it with no action at all.

That way the indexes get set again.

resetArr = orgArr.filter(function(){return true;});

The array-indexes 1,0,3,2 will be 0,1,2,3 again but the data remains in place.

As a reference: Need to reset just indexes of JavaScript array Stackoverflow Thread...


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.