Ngx-Bootstrap - Sortable

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;
   pne-height: 1.4em;
   text-apgn: center;
   cursor: grab;
   border: 1px sopd 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.