Kanban w/ Draggable Cards in Angular :: Drag and Drop

In this tutorial, we create a Kanban Layout with Draggable Cards using the Angular CDK.

The Angular CDK provides us with a really easy to use Drag and Drop module, which can be used to create a kanban layout. The cards can be dragged and dropped to be repositioned within their column or transferred between columns.

Hope you enjoy the video, drop a comment down below if you have any questions.

[kjderEchte]

If you want to skip the css tutorial, the main part starts at 22:15

[brak_]

Awesome stuff. I will extend the app a bit more with functionality for adding and removing tasks, plus change the design and this is going straight into my portfolio.

I need to update my portfolio because I wanna job-hop and I still have my old portfolio that got me my first job. I hope for more content of the same concise high quality on this channel.

Congrats.

[AJSpeller]

Yet another great tutorial. I plan on upgrading this project to able to add boards, columns and tasks on the fly.

[milanlietava]

Amazing :) definitely one of the best tutorials I have ever seen. Thank you so much for the lesson.

[ali-celebi]

That was really good to watch Andy! Thanks a lot!

[abdullahh]

Absolutely amazing tutorial! Thanks a lot.

[MoeMonkey]

This was wonderful to follow along, thank you!

[shirahachmon]

Great one. Well explained!!! thank you.

[Ben-pvyh]

Awesome. thanks. this helped me so much!

[sauravchoudhary]

Awesome man !!
This helps me a lot 🤘🏻☺️

[sadrarahmani]

thank you dude, this helped me get started <3

[paulfernandez]

Thank you man! It super clear and helps a ton!

[TheUnknown]

Great Video
One helpful improvement, use a zoom factor when showing code in VSCode on YouTube in a Standard monitor the code was very small, I either used the git Repo or the Windows Magnifier to follow along.
Thank you for the time and effort

[anassdkh]

thank you, i hope you add an input to it to add or modify tasks

[melikekozan]

Kardeş çok teşekkürler be. Çok anlamasam bile dediklerinden o kadar çok işime yaradı ki proje. Thank you soo much bro!

[Devstackr]

Sorry for the small font size in this video, the font size will be bigger in all future videos :)

[DecentralEyes]

For consistency you could use more flex properties such as justify-content: space-evenly instead of margin settings!

[beggimiro]

I created a kanban table with java script, it has iniciated, testing and done. I have another table called repairs that has the state of the repair: 1-iniciated 2-testing 3-done, how can i link those two? I want to connect the kanban with the state of the repair and whenever i drag 1 to 3 it would change into the right state on mysql.

[kapilbillore]

Hi mate, have a query on CSS flexbox. Why did you make group columns inside of board wrapper when u could have made just group column and make board wrapper as flexbox?

[HK-swvi]

for some reason I'm unable to move it across the boards, however, I'm able to reorder the elements withing the same board.