Dynamic Angular Class Toggle on Drag Events

Image by Gerd Altmann from Pixabay

Scenario

When we drag a file over the drop field we want to change the class assigned to the element to ImageUploadPreviewDragOver .

Approach

We first initialize our drop field class:

<div [class]="imagePreviewClass"
    (dragover)="onDragover($event)"
    (dragleave)="onDragout($event)">
</div>

When we drag over the drop field we change the value of the imagePreviewClass property to ImageUploadPreviewDragOver .

Demo