#Angular Material CDK — Drag and Drop between Lists [Mid-level, 2021]

preview_player
Показать описание

In this #Angular #tutorial you will learn how to implement basic Drag and Drop functionality using Angular CDK. You will find out how to make any element on your page draggable and how to drop it into another container. Besides this, we will fix a very common bug when during the dragging of an element, you have the wrong repositioning. I hope you will learn something new today. Enjoy and do not forget to share this video.

📣 Become a Pro in Angular Material Theming (Advanced Course) 📣
✅ Use 10%-off coupon code: YOUTUBE_DISCOUNT (Only 2 coupons left)

📣 Blazing fast GraphQL Backend just in 1 Day with Hasura Engine 📣
✅ 20%-off coupon code: HASURA-EASY-START

Time Codes:
00:00:00 - Intro;
00:00:38 - Let's get started;
00:15:11 - Add some animation;
00:15:34 - Fix a buggy reordering during an element dragging;
00:18:41 - Outro & Announcements;

Link to the source code:

#angulartutorial #angulardragdrop #webdevelopment
Рекомендации по теме
Комментарии
Автор

Also, keep in mind that in drop() methods you might also need to do an additional check if (event.previousContainer === event.container) and if you drop an element within the same container then you would need to use moveItemInArray() helper function. It was dropped for the tutorial but might be useful in many of your cases.

DecodedFrontend
Автор

Awesome video as always. Especially the explanation of where the array is defined, where it is passed by reference and as a result where it ends up being mutated, which in turn updates the view. That is so obvious for people who know what's happening, but is often missing if you don't know, and helps understanding why the code works, instead of just following "put this here, put that there" patterns.

Szergej
Автор

Thank you again for your videos. I just have no patience for your next video. Congrats!!

emmoldovan
Автор

Great tutorial. How would you handle a situation where you would want to swap / replace items between lists? I.e. if you drag an item from one list over an item in the other the items will be swapped between the lists?

janmagnusrkke
Автор

can you make a video on using re-usable web component in angular

ekhlasmridha
Автор

Hi thats a great video. But can we do cdkDroplist with dynamic components rendered on demand after clicking a button

vijayjx
Автор

Hey, thank you very much for your explanation! Very good indeed. Just one thing to add: how can you make a nested drop list? I read about it and there are some workaraounds, mostly with older angular versions. Do you have any example with angular 14 or above? The main goal would be to have some kind of box that can accept draggable items but they'll be runtime generated.

diegorapoport
Автор

Thank you! Where can I learn more, please? I've visited the Github repository but I need answers beyond what I'm finding there. (I'm self-taught at apprentice level so please pardon my ignorance.) I want to do things like replace an element, restrict placement by manipulating the index (maybe), replace an element on dragover, etc. There seem to be details in the library code that I don't know how to access.

E.g. to replace an element I am putting the element in on drop then deleting the next element in the index since the code library for copyArrayItem gives no splice-remove argument.

patrickc
Автор

awesome videos as always, i have question about exclamation mark in 10:11 in 52 line
user$!: Observable<UserDetails>
I know that this is used to tell typescript that we know better, but in this case we are working on types not objects. Never seen this before

Lokus
Автор

updated data is saved after refresh or not if not how we can do that

iamproud
Автор

Please can make video like simple
suppose there are four columns ok and each of them is having some data, we must be able to drag And Drop into from any column

TheOne-qvxw
Автор

Hey, How we can enable CORS in Angular. I use firebase as a backend. Please help

asfakhusain
Автор

Видео - супер. Единственно маленький момент height произносится больше как хайт, потому что хэйт это hate)))

letok
Автор

Anyone recommend free/paid resources to learn angular.

I have seen maximilian and some pluralsight course but I want something that make a project instead of explaining syntax in short video, can anyone recommend project base course please

It would be great help if you answer sir or make your one 😜.

It's pleasure learning from you. ♥️

saurabhchauhan
Автор

Подскажи плз что за extension, которое показывает размер импортов в kb?

letok
Автор

It's Height not Hate, I was puzzled for min what he was saying 😅. But overall very informative tutorial 👍🏻

RahulPawar-dlwn
Автор

Hii sir,

I am a regular follower and subsriber of your channel... Can u please make a complete project on Angular...

Like something facebook app Or E-commerce application.

Please make a complete project on angular.
It's my request to you.


Regards
Nabin

nabinghoshmaths
Автор

Сними пожалуйста тоже самое на русском! Много будет просмотров, супер полезная тема !

ilyatemnikov