Angular 17 Drag and Drop Tutorial

This project is part of a YouTube tutorial series demonstrating how to implement drag and drop functionality in an Angular 17 application. It provides a step-by-step guide to creating a simple yet interactive drag and drop interface using Angular Material's CDK.

Overview

In this tutorial, we build a basic drag and drop application using Angular 17. The project serves as a practical example to help developers understand and implement drag and drop functionality in their own Angular applications.

Features Covered

• Setting up an Angular 17 project
• Implementing drag and drop with Angular Material CDK
• Creating multiple drop containers
• Styling the interface with tailwindCss and basic CSS
• Handling drag and drop events
• Updating data models based on drag and drop actions

Technologies Used

• Angular 17
• Angular Material
• Tailwind Css
• Angular CDK (Component Dev Kit)
• TypeScript
• HTML/CSS

ScreenShots

Running the Project

• clone the repository and move to the project's directory, using the command:

    git clone https://github.com/mawalou14/angularDrag-Drop.git
    cd angularDrag-Drop

• Then at the root of the project's directory tap the command:

    npm install

  This is to install all the project's packages.
• Start the development server:

    ng serve

• The app is available in you browser under http://localhost:4200