Sortable using ngx-bootstrap in Angular 12+

In the last article we used jQuery as sortable in this article we discuss sortable using “ngx-bootstrap”. For that first we need to install “ngx-bootsrap” run below command


npm install ngx-bootstrap --save

After installing “ngx-bootstrap” which module do you need to use you need to add in the app.module.ts file. In this article, we use sortable so we import “SortableModule”.display in the below code.


......
import { SortableModule } from 'ngx-bootstrap/sortable';
......
 @NgModule({
    …
    imports: [ SortableModule.forRoot(), … ]
    …
  })

Now we can use the sortable module in our application. Let’s darg drop example for vegetables and fruits. for that let’s add the below code in the app.component.ts file


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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;

  itemStringsLeft = ['Mango', 'Banana', 'Apple', 'Potato'];

  itemStringsRight = ['Watermelon', 'Tomato'];
}

Below HTML file code for displaying the darg drop sorting.


<div class="container">
  <div class="row">
    <div class="col-xs-6 col-6 col-md-5 col-lg-3">
      <bs-sortable
        [(ngModel)]="itemStringsLeft"
        itemClass="sortable-item"
        itemActiveClass="sortable-item-active"
        placeholderItem="Drag here"
        placeholderClass="placeholderStyle text-center"
        wrapperClass="sortable-wrapper"
      ></bs-sortable>
    </div>
    <div class="col-xs-6 col-6 col-md-5 col-lg-3">
      <bs-sortable
        [(ngModel)]="itemStringsRight"
        itemClass="sortable-item"
        itemActiveClass="sortable-item-active"
        placeholderItem="Drag here"
        placeholderClass="placeholderStyle text-center"
        wrapperClass="sortable-wrapper"
      ></bs-sortable>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6 col-6 col-md-5 col-lg-3">
      <pre class="code-preview">model: {{ itemStringsLeft | json }}</pre>
    </div>

    <div class="col-xs-6 col-6 col-md-5 col-lg-3">
      <pre class="code-preview">model: {{ itemStringsRight | json }}</pre>
    </div>
  </div>
</div>

Output

Below is the full embeded code for sortable in angular. you can easily used in your application.
Example

Spread the love