ngx-bootstrap sortable component provides a configurable sortable component, with drag drop support.

SortableComponent

selector

• bs-sortable

Inputs

• fieldName − string, field name if input array consists of objects.

• itemActiveClass − string, class name for active item.

• itemActiveStyle − { [key: string]: string; }, style object for active item.

• itemClass − string, class name for item

• itemStyle − string, class name for item

• itemTemplate − TemplateRef<any>, used to specify a custom item template. Template variables: item and index;

• placeholderClass − string, class name for placeholder

• placeholderItem − string, placeholder item which will be shown if collection is empty

• placeholderStyle − string, style object for placeholder

• wrapperClass − string, class name for items wrapper

• wrapperStyle − { [key: string]: string; }, style object for items wrapper

Outputs

• onChange − fired on array change (reordering, insert, remove), same as ngModelChange. Returns new items collection as a payload.

Example

As we”re going to use a sortable, We”ve to update app.module.ts used in ngx-bootstrap Rating chapter to use SortableModule and DraggableItemService.

Update app.module.ts to use the SortableModule and DraggableItemService.

app.module.ts

import { BrowserModule } from ''@angular/platform-browser'';
import { NgModule } from ''@angular/core'';
import { BrowserAnimationsModule } from ''@angular/platform-browser/animations'';
import { AppComponent } from ''./app.component'';
import { TestComponent } from ''./test/test.component'';
import { AccordionModule } from ''ngx-bootstrap/accordion'';
import { AlertModule,AlertConfig } from ''ngx-bootstrap/alert'';
import { ButtonsModule } from ''ngx-bootstrap/buttons'';
import { FormsModule } from ''@angular/forms'';
import { CarouselModule } from ''ngx-bootstrap/carousel'';
import { CollapseModule } from ''ngx-bootstrap/collapse'';
import { BsDatepickerModule, BsDatepickerConfig } from ''ngx-bootstrap/datepicker'';
import { BsDropdownModule,BsDropdownConfig } from ''ngx-bootstrap/dropdown'';
import { PaginationModule,PaginationConfig } from ''ngx-bootstrap/pagination'';
import { PopoverModule, PopoverConfig } from ''ngx-bootstrap/popover'';
import { ProgressbarModule,ProgressbarConfig } from ''ngx-bootstrap/progressbar'';
import { RatingModule, RatingConfig } from ''ngx-bootstrap/rating'';
import { SortableModule, DraggableItemService } from ''ngx-bootstrap/sortable'';

@NgModule({
   declarations: [
      AppComponent,
      TestComponent
   ],
   imports: [
      BrowserAnimationsModule,
      BrowserModule,
      AccordionModule,
      AlertModule,
      ButtonsModule,
      FormsModule,
      CarouselModule,
      CollapseModule,
      BsDatepickerModule.forRoot(),
      BsDropdownModule,
      ModalModule,
      PaginationModule,
      PopoverModule,
      ProgressbarModule,
      RatingModule,
      SortableModule
   ],
   providers: [AlertConfig, 
      BsDatepickerConfig, 
      BsDropdownConfig,
      BsModalService,
      PaginationConfig,
      ProgressbarConfig,
      RatingConfig,
      DraggableItemService],
   bootstrap: [AppComponent]
})
export class AppModule { }

Update styles.css to use styles for sortable component.

Styles.css

.sortableItem {
   padding: 6px 12px;
   margin-bottom: 4px;
   font-size: 14px;
   line-height: 1.4em;
   text-align: center;
   cursor: grab;
   border: 1px solid transparent;
   border-radius: 4px;
   border-color: #adadad;
}

.sortableItemActive {
   background-color: #e6e6e6;
   box-shadow: inset 0 3px 5px rgba(0,0,0,.125);
}

.sortableWrapper {
   min-height: 150px;
}

Update test.component.html to use the sortable component.

test.component.html

<bs-sortable
   [(ngModel)]="items"
   fieldName="name"
   itemClass="sortableItem"
   itemActiveClass="sortableItemActive"
   wrapperClass="sortableWrapper">
</bs-sortable>

Update test.component.ts for corresponding variables and methods.

test.component.ts

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

@Component({
   selector: ''app-test'',
   templateUrl: ''./test.component.html'',
   styleUrls: [''./test.component.css'']
})
export class TestComponent implements OnInit {
   items = [
      {
         id: 1,
         name: ''Apple''
      },
      {
         id: 2,
         name: ''Orange''
      },
      {
         id: 3,
         name: ''Mango''
      }
   ];
   constructor() {}
   ngOnInit(): void {
   } 
}

Build and Serve

Run the following command to start the angular server.

ng serve

Once server is up and running. Open http://localhost:4200.