Mastering Angular Components

Implementing the draggable directive

The draggable directive will be attached to the elements that we want to enable for drag and drop. Let's get started by creating a new directive using the Angular CLI tool:

ng generate directive --spec false draggable/draggable

Let's open the directive class file, located in src/app/draggable/draggable.directive.ts, and add the following code:

import {Directive, HostBinding, HostListener, Input} from '@angular/core';import {DraggableType} from '../model';@Directive({  selector: '[macDraggable]'})export class DraggableDirective {  @HostBinding('draggable') draggable = 'true';  @Input() draggableData: any;  @Input() draggableType: DraggableType;  @HostBinding('class.dragging') dragging = false;}

By setting the ...