Smart.Sortable - configuration and usage

Getting Started with Angular Sortable Component

Setup Angular Environment

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new Application

ng new smart-angular-sortable

Navigate to the created project folder

cd smart-angular-sortable

Setup the Sortable

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

1. Download and install the package.
   

   npm install smart-webcomponents-angular

2. Adding CSS reference
   
   The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.
   
   

   @import 'smart-webcomponents-angular/source/styles/smart.default.css';

   
   Another way to achieve the same is to edit the angular.json file and in the styles add the style.
   
   

   "styles": [
   		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
   	]

   If you want to use Bootstrap, Fluent or other themes available in the package, you need to add them after 'smart.default.css'.
3. Example with Angular Standalone Components
   
   
   app.component.html
   
   

    <em>Drag and drop to change list order</em>
   <smart-sortable #sortable id="sortable"
   items="li">
       <ol>
           <li>Strawberries</li>
           <li>Mango</li>
           <li>Watermelon</li>
           <li>Apples</li>
           <li>Bananas</li>
           <li>Grapes</li>
           <li>Pineapples</li>
           <li>Oranges</li>
           <li>Raspberries</li>
           <li>Peaches</li>
           <li>Cherries</li>
           <li>Kiwi</li>
           <li>Blueberries</li>
           <li>Pomegranate</li>
           <li>Lemons</li>
       </ol>
   </smart-sortable>
   <div class="options">
       <smart-check-box #checkbox id="handle"><code>drag-mode="handle"</code>
       </smart-check-box>
   </div>

   
   app.component.ts
   
   

    import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
   import { CheckBoxComponent } from 'smart-webcomponents-angular/checkbox';
   import { SortableComponent } from 'smart-webcomponents-angular/sortable';
   
   
   import { CommonModule } from '@angular/common';
   import { RouterOutlet } from '@angular/router';
   import { SortableModule } from 'smart-webcomponents-angular/sortable';
   
   @Component({
       selector: 'app-root',
   	standalone: true,
   	imports: [CommonModule, SortableModule, RouterOutlet],
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   
   export class AppComponent implements AfterViewInit, OnInit {
       @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox!: CheckBoxComponent;
       @ViewChild('sortable', { read: SortableComponent, static: false }) sortable!: SortableComponent;
   
   
       ngOnInit(): void {
           // onInit code.
       }
   
       ngAfterViewInit(): void {
           // afterViewInit code.
           this.init();
       }
   
       init(): void {
           // init code.
   
   
           const that = this;
           document.getElementById('handle')?.addEventListener('change', function (event: CustomEvent) {
               if (event.detail.value) {
                   that.sortable.dragMode = 'handle';
                   that.sortable.handleVisibility = 'visible';
               }
               else {
                   that.sortable.dragMode = 'item';
               }
           } as EventListener);
   
   
       }
   }

   
   
4. Example with Angular NGModule
   
   
   app.component.html
   
   

    <em>Drag and drop to change list order</em>
   <smart-sortable #sortable id="sortable"
   items="li">
       <ol>
           <li>Strawberries</li>
           <li>Mango</li>
           <li>Watermelon</li>
           <li>Apples</li>
           <li>Bananas</li>
           <li>Grapes</li>
           <li>Pineapples</li>
           <li>Oranges</li>
           <li>Raspberries</li>
           <li>Peaches</li>
           <li>Cherries</li>
           <li>Kiwi</li>
           <li>Blueberries</li>
           <li>Pomegranate</li>
           <li>Lemons</li>
       </ol>
   </smart-sortable>
   <div class="options">
       <smart-check-box #checkbox id="handle"><code>drag-mode="handle"</code>
       </smart-check-box>
   </div>

   
   app.component.ts
   
   

    import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
   import { CheckBoxComponent } from 'smart-webcomponents-angular/checkbox';
   import { SortableComponent } from 'smart-webcomponents-angular/sortable';
   
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css']
   })
   
   export class AppComponent implements AfterViewInit, OnInit {
       @ViewChild('checkbox', { read: CheckBoxComponent, static: false }) checkbox!: CheckBoxComponent;
       @ViewChild('sortable', { read: SortableComponent, static: false }) sortable!: SortableComponent;
   
   
       ngOnInit(): void {
           // onInit code.
       }
   
       ngAfterViewInit(): void {
           // afterViewInit code.
           this.init();
       }
   
       init(): void {
           // init code.
   
   
           const that = this;
           document.getElementById('handle')?.addEventListener('change', function (event: CustomEvent) {
               if (event.detail.value) {
                   that.sortable.dragMode = 'handle';
                   that.sortable.handleVisibility = 'visible';
               }
               else {
                   that.sortable.dragMode = 'item';
               }
           } as EventListener);
   
   
       }
   }

   
   app.module.ts
   
   

    import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { CheckBoxModule } from 'smart-webcomponents-angular/checkbox';import { SortableModule } from 'smart-webcomponents-angular/sortable';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [ AppComponent ],
       imports: [ BrowserModule, CheckBoxModule, SortableModule ],
       bootstrap: [ AppComponent ]
   })
   
   export class AppModule { }

   
   

Running the Angular application

After completing the steps required to render a Sortable, run the following command to display the output in your web browser

ng serve

Read more about using Smart UI for Angular: https://www.htmlelements.com/docs/angular-cli/.