Moving Forms Up/Down Angular 2

I have created a dynamic form in Angular 2, which adds additonal item on clicking a button. I now want to implement a form up/down functionality that basically replaces the item using the 'Move' button. Following is my code:

component.ts

    public pipeLineForm: FormGroup;
    pipelineConfigs: PipelineConfigs[];

constructor(
    private http: Http,
    private _fb: FormBuilder)

    ngOnInit() {
    // initialize form here
    this.pipeLineForm = this._fb.group({
        pipelineConfigs: this.initPipeLineArray()
    });
}

initPipeLineArray() {
    let pipeArray = this._fb.array([]);
    pipeArray.push(this.initPipeline());
    pipeArray.push(this.initPipeline());
    return pipeArray;
}

initPipeline() {
    return this._fb.group({
       sourceType: ['', Validators.required],
       sourceName: ['', Validators.required],
       sourcePath: ['', Validators.required],
       query: ['', Validators.required]
    });
}


removePipeline(i: number) {
    if (i > 1) {
    const control = <FormArray>this.pipeLineForm.controls['pipelineConfigs'];
    control.removeAt(i);
    }
}

addNewPipelineConfigs() {
    const control = <FormArray>this.pipeLineForm.controls['pipelineConfigs'];
    control.push(this.initPipeline());
}

pipelineconfigs.ts

    export class PipelineConfigs {
    searchField: string;
    sourceType: string;
    sourceName: string;
    sourcePath: string;
    query: string;
}

html

  <div class="panel panel-default clearfix" [formGroup] = "pipeLineForm">
            <div class="row"  >
                <div class="col-xs-12">
                    <p class="margin-b20px">This is the base line item and you can change it using up &amp; down arrows.
                    </p>
                </div>
            </div>
            <div formArrayName="pipelineConfigs">
            <div class="row" *ngFor="let pipes of pipeLineForm.controls.pipelineConfigs.controls; let i=index;" >
                <div [formGroupName]="i">
                    <div class="col-xs-10 additional-details-fields">
                    <div class="row">
                        <div class="col-xs-4">
                            <label class="float-label" [class.empty]="sourceType1 ==''">
                                <span class="placeholder">Select Source Type
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <select formControlName="sourceType">
                                    <option disabled>Select Source Type</option>
                                    <option value="Stream">Stream</option>
                                    <option value="Stream 1">Stream 1</option>
                                    <option value="Stream 2">Stream 2</option>
                                </select>
                            </label>
                        </div>
                        <div class="col-xs-4 form-group">
                            <label class="float-label" [class.empty]="sourceName1.length==0">
                                <span class="placeholder">Source Name
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <input formControlName="sourceName" type="text">
                            </label>
                        </div>
                        <div class="col-xs-4 form-group">
                            <label class="float-label" [class.empty]="sourcePath1.length==0">
                                <span class="placeholder">Source Path
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <input formControlName="sourcePath" type="text">
                            </label>
                        </div>
                        <div class="col-xs-12 form-group">
                            <label class="float-label" [class.empty]="query1.length==0">
                                <span class="placeholder">Query
                                    <span class="hide-placeholder">&nbsp;</span>
                                </span>
                                <textarea formControlName="query">{{query}}</textarea>
                            </label>
                        </div>
                    </div>
                    </div>

                <div class="col-xs-2 additional-details-actions">
                    <div class="col-xs-4">
                        <label class="label-text block">Order</label>
                        <label class="label-value block">{{i}}
                        </label>
                    </div>
                    <div class="col-xs-4">
                        <div class="row">
                            <label class="label-text block">Move</label>
                            <div>
                                <a class="clickable actionbtn order-up">Order Up</a>
                                <a class="clickable actionbtn order-down">Order Down</a>
                            </div>
                        </div>
                    </div>

I have basically identified that the pipelineConfigs is an array of objects and somehow I need to change the index of the items but since I am new to angular with typescript, I am unable to figure out how to put it in code. Would be glad if somebody could help.

Thanks

You have to

1. define 2 methods : moveUp and moveDown
2. define a swap function that will swap items in your array one by one

Here is a quick example and the demo

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  array = ["One", "Two", "Three", "Four", "Five"]

  moveUp(index: number) {
    console.log("up", this.array[index]);
    if (index >= 1)
      this.swap(index, index - 1)
  }

  moveDown(index: number) {
    console.log("down", this.array[index])
    if(index < this.array.length-1)
    this.swap(index, index + 1)
  }

  private swap(x: any, y: any) {
    var b = this.array[x];
    this.array[x] = this.array[y];
    this.array[y] = b;
  }
}

component.html

<div *ngFor="let item of array; let i=index">
  <span>{{item}}</span>
  <button (click)="moveUp(i)">Move up</button>
  <button (click)="moveDown(i)">Move down</button>
</div>