Angular PrimeNG Drag and Drop Drop Indicator

Angular PrimeNG is a collection of Interactive UI components for Angular applications. Developers can use these components to make beautiful and responsive web interfaces in no time as most of the components have all the necessary functions implemented. In this article, we will see Angular PrimeNG Drag and Drop Drop Indicator.

The Drag and Drop directives (pDraggable and pDroppable) are used to apply drag and drop behavior to any element. When a draggable element enters a droppable area, the p-draggable-enter class is added to the droppable area and this class can be used to give the area any custom styling to indicate that the element can be dropped.

Syntax:

:host ::ng-deep .p-draggable-enter{
    // CSS styling
}

Creating Angular Application and Installing the Module:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Finally, Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: The project Structure will look like this after following the above steps:

Project Structure

Example 1: In this example, we gave a green border to the droppable area when a draggable element enters it.

app.component.html

app.component.css

app.component.ts

app.module.ts

Output:

Example 2: In this example, we drag the table entries into a div that contains item chips. Here whenever we move an item from the table to the div a red border is applied to the droppable div.

app.component.html

app.component.css

app.component.ts

app.module.ts

Output:

Reference: http://primefaces.org/primeng/dragdrop