Tech lead for Angular CDK and Angular Material. Specializes in component design and clean, maintainable code.View the profile
About the talk
Hear the latest about Angular Material and the CDK. Hear about the future plans from the team about how to deliver great experiences for your users at scale.
Follow us on twitter https://twitter.com/ngconf
Official Website: https://www.ng-conf.org/
Alright. Hello, everybody. Welcome to the cdk is the coolest thing you are not using yet. I am Jeremy Elmore and I am the tech lead for angular cdk and angular material. Now most of you in this audience are probably familiar with angular material by now just in case there's some new people who aren't angular material is a project by the angular team to provide a suite of UI components based on Google material design specification. Now, I know though that many of you aren't using the cdk or some of you might not even know about it. So c d
k stands for component dev kit and it is a package of coming foundation and patterns that you can use for building your own UI components in the cdk is comprised of multiple capabilities ranging from accessibility and bidirectionality overlays his platform detection tables trees and even some new stuff like Dragon drop and virtual scroll and we originally set out to make the TDK because we know More and more organizations are building their own Design Systems and their own Suites of components and we want people building those
things to be able to take advantage of the work that we do in building common components for angular material and our team has really broadened our scope in our work in the TDK. So if you've ever seen are GitHub repository you seen its call angular material to and it was called this because when we started the project we were really focused on those material design components and over time. We brought it our scope and are working out of more things and that pesky to is in there. We always want to get rid of that pesky number two. So
last week last Friday, we actually change the name of our repo to angular components and I'm hoping that this signals that we are taking on a bra. Set of work for our team to work not just on material design experiences, but for any kind of tools that developers might need to build their own UI components and we've also changed the way we talked about. Our team are part of the angular team for years. We were considered the angular material team and that's how people talked about us. That's how
we talk about ourselves, but we've actually change that terminology and we now refer to ourselves as the angular components team and I've actually been using that term over the last few days here at ng-conf and nobody's been confused when I said that so I think that's a good litmus test for people understanding like this is actually what we're doing. I want to clarify that this does not affect our our packages or any of our apis. We still have an STD K and angular material on mpmp. This is just kind of more of an organizational thing that hopefully signals that we're trying to do more
than just material design experience as Enzo in those efforts to make component easier to build and expand the features that we have last year at ng-conf. I I talked about this is what we were going to be doing in the future right here while I was standing right here. I said we were going to work on some Dragon drop features virtual scrolling features and more enhancements for disabled and I don't want to brag but we totally did all of those things and I want to show off specifically some of the Dragon drop feature is that we've added over
the last year and what better way to do that then with some live coding which is so much more exciting than looking at slides. So I'm going to pop over to webstorm here and I have a totally empty angular CLI project that I have created. It has nothing in it. All I've done so far is installed angular cdk because I'm not installing amp and packages on stage. And so I am going to just go ahead and add some CSS cuz nobody wants to see me right CSS sunscreen on stage. So this is some pre-made demo CSS. I made I'm just popping that in there
and now I'm going to go ahead and start adding the code. So the first thing I'm going to do is come into my engine module and I'm going to add the drag drop module from angular cdk. So we've got that we have all of our directives available to us now. And with that I'm going to pop over into my component template here and I'm going to start off with something really simple. I'm just going to a daddy and I'm going to give that a class of example drag and then I am going to just on the stood give at one directive cdk drag that's it. Nothing else. And so now I want
to come over to my browser which has gone somewhere. There it is. I'm going to full screen that real quick. there was NFL screen there is my anywhere app being served. I have this green dip that I decided here and I can drag that around that's great to all I had to do is put that one directive on that Dave and I can start free dragging it. However, I could just drive that right off the screen and I don't really like that. So I'm going to go back here and I'm going to add a bounds for this track of all so I'm going to additive
hear that is a bounding box and I'm going to wrap my dragon ball in that and then I'm going to add an input onto my c--k drag directive here that is cdk drag boundary and I need to assign this to this bounding box. I want to use and so what I'm going to do here is an ID. Call bounce on that and then I can give a CSS selector here. So I'm going to give bounds and when I come back to my browser now there is this bread. It a bounding box here and if I try to grab the
green box out, it does not let me. So that's pretty cool. And there's a lot I can do with this free dragging. If I pop open my autocomplete here. You can see I have all sorts of events for like drag move Dragonair Drake exit drop. I can lock my Dragon Ball to a certain access But ultimately this free dragging is of limited usefulness. There's not that many situations where you want to use it most of the time you want to have some kind of drop zone or you want to have some list your reordering or moving items. And so I'm going to
show off some of that instead. So I'm going to get rid of all that popped back to my component code and I'm going to go ahead and add that most cliche thing to do list. And so I made some to-do items here that I really need to get these done soon. My time is really running out. So I'm going to go back to my temple now and add a little bit of UI for these to-do item. So just a little example list. And some example items. We're going to call those example box and then we're going to repeat our items with an NG for
to do. . Art do you items and there's are two items. So these are all the things I have to do, but I haven't added any interaction yet. So let's go ahead and add some interaction. I'm just going to add to directive deer cdk drop list on my list and I'm going to add on each item cdk drag. So the TDK drag directive says hey, this is an item in the tracklist and a trackable and this drop list treats this whole list as One Drop Zone with knowledge that there are
list items in here that can be reordered or moved around. And so if I go back to my browser now, I can pick up one of these items and start dragging it and you can see it leaves a space where the item was and as I move it through the list the item Shuffle around and make space for it. But when I drop this item you're going to see that it doesn't actually persist when I drop it goes back to where it was. Why is this so the directive don't actually know anything about your data. I used an NG for to render these out and the directors don't know anything about where your data
lives or how it's structured. You could be using just an array in your component. Like I am or you could be using something like in ngrx store and it's up to the Can I perform updates to that data? So in order to do that, I'm going to add an event to this drop list called DK droplets dropped and I'm going to adjust in create a new function called drop and I'm going to pass it this event. And so now I'm going to go Implement that. I'll say drop. And this is going to take in an event of type TDK drag drop,
which is generic for the type of data that I'm dealing with. And so all I want to do here is Shuffle the items around in my Ray. So fortunately there is a helper function in C K drug drop called mood item in Array. So I'm going to go ahead and use that I'm going to pass it this. To do and from my event. I'm going to get the previous index where the item came from and the current index where the item is going. And so now when I pop back over to my browser, I can slide these items around and I can drop one and there it stays so
Until all of that was just by adding these to directive and it's event to update my data. So great. I can move my to-do items around but I don't have any way to say that they're done. So let's go ahead and do that. So I'm going to come here and add another list here called done and it just has one thing and it's so far and that is get dressed, which is really all I've managed to do today, and I'm going to come back to my template here and I'm just going to duplicate that whole thing and change to do to done. So now if I come in my browser, I can still rearrange my items in my list.
But if I try to drag an item over here, it doesn't do anything. I can't move these items between the bus and this is because I have to connect these to drop list to each other so that they know that they can interact and so the easiest way to connect these to drop list is to wrap them inside of a cdk drop list group and if I had another element here, I would have put that directed on that element, but I don't have another element here. So I'm just going to add an NG container around this whole thing because I don't want to real Dom element. And I'm going to add
cdk drop list group. And so any cdk drop list inside of this group will automatically be connected there more specific ways to connect these list, but for our purposes this doesn't we need a tail? And so now if I go back to my browser, you'll see I can actually drag an item from here and while these still circle around I can move over here and there's some space for my new item. But when I drop this we're going to see a problem I drop it it goes right back to where it was. But even a different place in the other lest, we don't want that but it's pretty obvious why that's happening.
Our drop Handler here is just doing move item in Array it as soon as we're always using the same list, and now that we're moving items between a raised we have to have a little bit smarter logic. So we need to check in Arvin object. I always say if event thought previous container. So that's alright. The container is our droplist is equal to the event. The current container then we want to continue doing move item in Array and if it's not in the same we want to transfer the items between array and fortunately we have another helper function for that. So
transfer transfer a item also coming from cdk Drive drop and we need to pass this the data for the arrays removing items between but there's one more thing we need before we actually have the information we can pass this function. We need to know which list is our data coming from and which one is it going to end so we can have that data by going back to a temple here and associating the data with each drop list. So our to-do list here. I'm going to add a binding on a TDK drop list data for to do and I'm going to do the same thing for my done list.
With Arthur an item and what you do with a associate any arbitrary data with your drop list so that when your events of trigger, you can consume that data and make changes to the behavior of your program is based on what you're getting. So now we can come back here and we're going to call transfer array of them with our event the previous container. Data which is going to be our array. We're going to transfer to our event. Current container. Data and then we just need to give the indices for where those items are going to sit. So that's event.
previous index an event. Current index and now we pop back over to our browser and when I drag slides over here to my done list its phase. And I can move items back. And all this was just we added the directives are drop list. We had our dragged all we had an event to update our data when item is dropped and we Associated some data with the drop list. So there's a lot more settings and a lot more configuration and features for all of this cdk drag drop. I don't have time to show them all off today. So I'm going to end up there and pop back to my flights. So before I wrap up I did
want to spend a little bit time today talking about and give the material itself. Even though I know this talk is about the TDK. Even though we've changed our team name and you were material is so obviously a huge part of what we're working on every day, and I wanted to talk about one particular thing. We're doing in the near future and it involves this other Library called MDC web. This is an open source library that is created by the material design team at Google and it provides a set of Primitives that can be used to compose
web provide some building blocks that will go into composing components into angular material. This is going to give us a number of benefits. So first of all is going to be a very consistent material design experience for everybody using both MDC web in other form factors and in angular material because it's created by the material design team. Are they care very much about it being on spec and staying up-to-date with the latest changes to material design. There's going to be less duplication of effort. So the material design team gets to focus on those really nitty-gritty CSS details
and bezier curves while the angular team gets the focus on doing cool new angular stuff and we're making sure that we have the same angular API and the same angular features. So if you're using magic box, it's going to stay the same Magic Box API same inputs same typescript apis, the internals of the component will change a little bit. That will be a little bit different the bone structure is going to change your bed, but you're going to get a bunch of benefits from more people working on this. We have an early preview of some of these components right now in our
material experimental package that's even talked about this morning during the keynote. We have button checkbox menu and slide Taco available for people to try out and give us some feedback. Obviously. This package has experimental in the name. So it's not stable. Production-ready. It's not final but we'd like to get feedback based on the direction. We're going from the community. You can find instructions for how to use these in the readme for this package. You can see that we have some checkboxes here. This is the Met checkbox we have today
and then we can compare that to the MDC base checkbox. They look almost identical but there are some very small subtle changes out of his little bit different spacing and this is a little bit more on one factor material design it. So we're really excited about how this is going to evolve and provide a better experience for material design over the future. So that's all I have time for today. Thank you so much for coming. Are you can find more information about the components material and cdk and material. And go to i o r GitHub
Buy this talk
Access to all the recordings of the event
Buy this video
With ConferenceCast.tv, you get access to our library of the world's best conference talks.