Implementing a drop target directive

Drop zones will act as containers where draggable elements can be dropped. For this, we'll create a new draggable drop zone directive. Let's use the Angular CLI to create the directive:

ng generate directive --spec false draggable/draggable-drop-zone

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

import {Directive, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';import {DraggableType} from '../model';@Directive({  selector: '[macDraggableDropZone]'})export class DraggableDropZoneDirective {  @Input() dropAcceptType: DraggableType;  @Output() outDropDraggable = new EventEmitter<any>(); @HostBinding('class.over') ...

Get Mastering Angular Components now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.