Skip to content

Latest commit

 

History

History
51 lines (38 loc) · 1.71 KB

README.md

File metadata and controls

51 lines (38 loc) · 1.71 KB

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.

drag-drop1

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

drag-drop1

drag-drop2

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