Sortable Elements in Angular Application

In my last article we discuss on how to use popover in angular application. In these tutorial i discuss on how to create sortable elements in Angular application.
First we need to add below line in our app.module.ts file.


........
import { SortableModule } from 'ngx-bootstrap';
........
@NgModule({
  imports: [SortableModule.forRoot(),...]
})
export class AppModule(){}

After adding SortableModule in the app module file. Now we can use in any component.Let’s create Basic code for the sort-able elements.


<div class="row">
  <div class="col-xs-6 col-6 col-md-5 col-lg-3">
    <bs-sortable
      [(ngModel)]="sortableStrings"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">Output: {{ sortableStrings | json }}</pre>
  </div>


import { Component } from '@angular/core';
 
@Component({
  selector: 'sortable-demo',
  templateUrl: './sortable.html'
})
export class SortableComponent {
  sortableStrings = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 6'
  ];
}

In above Basic example item only a single element like “Item 1″,”Item 2”. You can pass Json string with multiple field like “{ id: 1, title: ‘Item 1’ }”. Code display like below.


<div class="row">
  <div class="col-xs-6 col-6 col-md-5 col-lg-3">
    <bs-sortable
      [(ngModel)]="dataWithSortable"
      fieldName="title"
      itemClass="sortable-item"
      itemActiveClass="sortable-item-active"
      placeholderItem="Drag here"
      placeholderClass="placeholderStyle"
      wrapperClass="sortable-wrapper"
    ></bs-sortable>
    <pre class="code-preview">Output: {{ dataWithSortable| json }}</pre>
  </div>


import { Component } from '@angular/core';
 
@Component({
  selector: 'sortable-demo',
  templateUrl: './sortable.html'
})
export class SortableComponent {
 dataWithSortable: any[] = [
    { id: 1, title: 'Item 1' },
    { id: 2, title: 'Item 2' },
    { id: 3, title: 'Item 3' },
    { id: 4, title: 'Item 4' },
    { id: 5, title: 'Item 5' },
    { id: 6, title: 'Item 6' }
  ];
}

Output of the above codes display in below video.

Spread the love

Education For Betterment

About The Author

Jugal Rana

Related Posts

About The Author