NG Conf 2019 Day 3 CDK Is The Coolest Thing You Are Not Using With Jeremy Elbourn

[Music] all right hello everybody welcome to the cdk is the coolest thing you are not using yet I am Jeremy el born 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's 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 common foundations and patterns that you can use for building your own UI components the CD K is comprised of multiple capabilities ranging from accessibility and by directionality overlays platform detection tables trees and even some new stuff like track and drop and virtual scroll and we originally set out to make the CD K 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 CD K so if you've ever seen our github repository you've seen it's called angular material 2 and it was called this because when we started the project we were really focused on those material design components and over time we as I mentioned we brought at our scope and are working on kind of more things and that pesky 2 is in there and we always want to get rid of that pesky number 2 so last week last Friday we actually changed the name of our repo to angular component and I'm hoping that this signals that we are taking on a broader 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've 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 talked about ourselves but we've actually changed that terminology in it 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 api's we still have angular cdk and angular material on NPM this is just kind of more of an organizational thing that hopefully signals that we're trying to do more than just material design experiences and so in those efforts to make components 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 drag and drop features virtual scrolling features and more enhancements to our data table 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 drag and drop features that we've added over the last year and what better way to do that than with some live coding which is so much more exciting than looking at slides so I'm gonna 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 NPM packages onstage and so I am going to just go ahead and add some CSS because nobody wants to see me write CSS on screen on stage so this is some pre-made demo CSS I made I'm just popping that in there and now I'm gonna go ahead and start adding the code so the first thing I'm gonna do is come into my ng module and I'm gonna 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 gonna start off with something really simple I'm just gonna add a div and I'm gonna give that a class of example drag and then I am going to just almost did div at one directive cdk drag that's it nothing else and so now I'm gonna come over to my browser which has gone somewhere there it is I'm going to fullscreen that real quick there it was enter full screen okay there is my angular app being served I have this green div that I just added here and I can drag that around that's great so all I had to do is put that one directive on that div and I can start free dragging it however I could just drag that right off the screen and I don't really like that so I'm gonna go back here and I'm gonna add bounds for this dragonball so I'm gonna add a div here that is a bounding box and I'm gonna wrap my dragged a ball in that and then I'm going to add an input onto my cdk dragged directive here that is cdk dragged 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 add an ID call bounds on that and then I can give a CSS selector here so I'm gonna give pounds and when I come back to my browser now there is this red dotted bounding box here and if I try to drag 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 a my autocomplete here you can see I have all sorts of events for like drag moved drag enter drag exit drop I can lock my draggable to a certain axis 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 dropped zone or you want to have some list your reordering or moving items and so I'm gonna show off some of that instead so I'm gonna get rid of all that pop back to my component code and I'm gonna go ahead and add the most cliche thing a 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 gonna go back to my template now and add a little bit of UI for these to-do items so just a little example list and some example items we're gonna call those example box and then we're gonna repeat our items with an NG for so I say let t of to do enter in our to-do items and there's our to-do 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 two directives here CDK drop list on my list and I'm gonna add on each item cdk drag so the cdk drag directive says hey this is an item in this track list 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 that item was and as I move it through the list the items 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 it goes back to where it was why is this so the directives don't actually know anything about your data I in ng4 to render these out and the directives don't know anything about where your data lives or how its structured you could be using just an array in your component like I am or you could be using something like an NG rx store and it's up to the application to perform updates to that data so in order to do that I'm going to add an event to this drop list called cdk droplets dropped and I'm gonna just in create a new function called drop and I'm gonna pass it this event and so now I'm gonna go implement that I'll say drop and this is going to take in an event of type cdk 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 array so fortunately there is a helper function in CDI drug drop called move item in array so I'm going to go ahead and use that I'm gonna pass it this dot 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 and so all of that was just by adding these two directives in this 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 gonna come here and add another list here called done and it just has one thing in it so far and that is get dressed which is really all I've managed to do today and I'm gonna come back to my template here and I'm just gonna duplicate that whole thing and change to do to done so now if I come to 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 is less and this is because I have to connect these to drop lists to each other so that they know that they can interact and so the easiest way to connect these to drop lists is to wrap them inside of a cdk drop list group and if I had another element here I would just put that directive on that element but I don't have another element here so I'm just gonna add an NG container around this whole thing because I don't want a real Dom element and I'm gonna add cdk drop list group and so any cdk drop list inside of this group will automatically be connected there are more specific ways to connect these lists but for demo purposes this does what we need it to 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 sarff all around I can move over here and there's some space for my new item but when I drop this we're gonna see a problem I drop it it goes right back not to where it was but even a different place in the other list 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 assumes we're always using the same list and now that we're moving items between arrays we have to have a little bit smarter logic so we need to check in our event object we say if event dot previous container so that's our that container is our drop list is equal to the event that the current container then we want to continue doing move item and 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 array item also coming from cdk drag drop and we need to pass this the data for the arrays we're moving 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 and so we can have that data by going back to our template here and associating the data with each drop list so our to-do list here I'm gonna add a binding on CD K drop list data for it to do and I'm going to do the same thing for my done list with our done items and what this is lets you do is associate any arbitrary data with your drop list so that when your events are trigger you can consume that data and make changes to the behavior of your program based on what you're getting so now we can come back here and we're gonna call transfer array item with our event the previous container the 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 dot previous index and event dot current index and now we pop back over to our browser and when I drag slides over here to my done list it stays and I can move items back and all of this was just we added the directives our drop list we added our drag we add an event to update our data once 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 the cdk drag drop I don't have time to show them all off today so I'm going to end it there and pop back to my slides so before I wrap up I did want to spend a little bit time today talking about angular material itself even though I know this talk is about the cdk even though we've changed our team name angular material is still 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 material design components and when I say primitives I'm talking about CSS and JavaScript assets and we've been collaborating with the material design team over the last several months to find out how we can take the efforts that they've put into their library and the efforts we've put into our library and work together more closely and so we're today our package structure looks something like this where angular CDK is the foundation for angular material which is then consumed in applications going forward it will look something like this angular cdk provides behaviors while MVC web provides 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 there's going to be a very consistent material design experience for everybody using both MVC web and other form factors and in angular material because it's created by the material design team 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 duplic 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 to focus on doing cool new angular stuff and we're making sure that we have the same angular api's and the same angular features so if you're using matte check box it's going to stay the same matte check box API same inputs same type script api's the internals of the component will change a little bit the CSS will be a little bit different the Dom structure is going to change a bit 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 Stephan talked about this morning during the keynote we have button checkbox menu and slide toggle available for people to try out and give us some feedback obviously this package has experimental in the name so it's not stable it's not 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 check boxes here this is the matte check box we have today and then we can compare that to the MDC base check box they look almost identical but there are some very small subtle changes there's a little bit different spacing and this is a little bit more on spec for material design and 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 you can find more information about the components material and cdk at material angular2 io our github repository is angular slash components and you can find these slides at GCO /ng slash conflate teen - components - slides and thank you again for coming [Applause] [Music] [Music] you

Channel: ng-conf

Views: 25,424

Keywords: angular, angularjs, javascript, ngconf, ng-conf, programming, angular conference, ng conference, angular javascript, angular tutorial, Javascript Tutorial, Programming Tutorial, Computer Programming, Google Angular, Google Programming, ngconf 2019

Id: 4EXQKP-Sihw

Length: 18min 59sec (1139 seconds)

Published: Sat May 04 2019