How To Sort Row Of Grid in Angular 6

How To Sort Row Of Grid in Angular 6

Setup For Sortable JS

1). Install Plugin  "'angular-sortablejs"

2). set reference or import service

     import { SortablejsOptions } from 'angular-sortablejs';

3).Define Variable in Class

    public sortableOptions: SortablejsOptions;

4).Define Function in class for Get Rows of Grid or table

   get fieldRows() {

     return this.contractFormService.fieldRows(this.newContractIOTForm, this.discountType,                   this.discountTypeID, this.j);

    }

5).Call Method in OnInit() method

    this.sortableOptions = {

    onSort: (event: any) => {

    this.contractFormService.sortFormFields(

    this.j,

    this.newContractIOTForm,

    this.discountType,

    this.fieldRows, this.discountTypeID);

                                 }

    };

6). set property of Grid in html of Currunt ts file 

   [sortablejs]="fieldRows" [sortablejsOptions]="sortableOptions"

7). Define Common Function for sorting Functionality for Data

 

 sortFormFields(j: number, newContractIOTForm: FormGroup, discountType: string,            arrayIndexes: AbstractControl[], TypeID) {

   const discountTypeList = newContractIOTForm.get(discountType).get('DiscountTypes').value;

   if (discountTypeList) {

   for (let index = 0; index < discountTypeList.length; index++) {

   const discountTypeID = discountTypeList[index].DiscountTypeID;

  const offerFields: FormArray = this.getDiscountFields(newContractIOTForm, discountType,     discountTypeID);

   if (TypeID === discountTypeID) {

   const _temp: FormArray = offerFields.controls[j] as FormArray;

    arrayIndexes.forEach((ele: FormGroup, i) => {

  const fields = _temp.controls[i] as FormGroup;

fields.setValue(ele.value);

});

}