AngularNYC - Angular CDK portals - Nir Kaufman (@nirkaufman)

and hey everyone so this is the title for my talk I'm going to talk about angular cdk portals just passing through what a great title I just made it up two minutes ago this is me my name is near I'm walk at five nine with tech also Google developer experts for web technology is the angular 500 tech we help companies to build front-end that what we do you should check out our website we've got some cool things so if you're working with front-end talk with me and got a lot to tell you about but I'm doing a lot of other stuff as well I'm professional dancer on my free time and the carpenter and those are real pictures no Photoshop involve and I'm also a volunteer so if you suffer from PHP if you recently discovered your page B+ or know someone who is PHP positive we've got a support group you can call this number and we can help you this is not funny come on people are using PHP for living it's all about building components so Ambler material if you're not familiar with this library this library is a set of components built specially for angular they implement material design which is a design spec by Google you probably familiar with this design if using I mean any of Google product product so it's in your email it's it's Android it's everywhere hopefully I'm gonna give it a try oh yeah single page app the future for example let's take this look at this tooltip right so it's set of components that come bundled with animation with all those tiny details of how this colors moving space and a great library you should write but there is a problem with angular material that is a very strict spec expect that Google came with so if you're building your own AK you probably want your own style the big the biggest problem with with libraries like angular material that enforce theme of colors on you is designers this is a real picture of design right they usually look like this they just don't happy with nothing you know why designers are not happy people in general know know the secrets and that they try to be doctors what it just it didn't works out let's talk about let's talk about CD k alright city k so Google has been working on this library of components and actually they did a really good job on on the behavior side of those components so they build great data tables and it's got great accessibility and a lot of interactions and great components but as I said before it's come bundled with colors and style that you're not always want to use so this CD K which stands for component development kit was a side project it was split splitted out of this angular material in other words while they were working on those component like from controls the navigation and all of this they discovered of course that there is a lot in common when you build components look at this amazing animation for example alright things like scrolling accessibility a layout protoss what we're going to talk about today those are set of behaviors that all of the components got in common most of them use the same principles so they separated this library this API of behavior from the styling and we're going to talk about Porter's specifically so if I go here to see DK you see you've got its library common Havers accessibility observer scrolling overlay layout portal which means that you can use those api that google built for you for your own components so you don't need to reinvent the wheel and you don't need to use their starting and Simek so you can build your own great data table with solid api for each asset API without be restricted to how it looks like wonderful so this is the definition of portals all right don't worry you're gonna get to the code really soon so it's not gonna be just lies I'm just like with prairie in there like some theoretical part it's very important when you do talks like this this is the definition of what portals is gonna do is it's a piece of UI that you can dynamically render to an open slot on the page sounds professional agree cool so we're basically talking about dynamic rendering whose tried to render component component dynamically in angular recently we heard about component factoring resolver component outlets cool just few of you so for the rest of you if you ever try to render some dynamic content you're gonna meet those guys ng container and your component outside component factories of the view container if ng template out that a bunch of api's that you might not be familiar with if you you know if you haven't try to render something else than text to your template all right cool I don't know let's move forward so let's let's let's let's look at some code because it was too much slides and I think we got some miscommunication I want to show you how it works but before I start the live coding I just want to say thank you to my sponsor and the lifetime who brought you by this is a picture of a little girl waiting for Adair to come back from work but her death working with via score so it's going to be late use webstorm and you have more time for your family so I've got here I've got here just an app that I'll generated with angular CLI let's try to do something spontaneous I'm gonna just create something like Hello CD k let's see if it works yeah alright good so because most of you are not familiar with those tons of API that's it just show you let's see a very very fast example of what it's take from you to take a component and render it on another component alright so let's create a component you know what let's create a component on this component library so I'm going to use webstorm integration let's call this component action button I want inline template and inline style and it can be flat and I don't want any tests go away alright so I've got this component this button let's leave the default text here alright just to play with it now let's say that I want to take this component and I want to render it dynamically inside this component cool so there's a bunch of stuff that I need to do first I need to go to my module I need to make sure that this action button component is not just registered under declaration but also under entry component which is a spatial array special array that that tells angular that this component is going not going to be declared on the template I'm not going to use the tag it's going to be rendered dynamically so I have to include it in another array all right back to my app component so now if I want to render this component the fun begin first I need to create some kind of a placeholder I'm going to use ng container ng container is a tag with the dummy tag dummy element he won't create any real element on the dome so you can use it as a placeholder all right cool so I need some kind of an entry container and I need to take reference to this ng container let's call it container very creative and then I want to reference this element from my component class so I'm going to use view child and grab this container I'm gonna get something that I'm guro I'm gonna get a view container s actually I'm gonna get an element riff but what I'm going to do I'm going to take this container I'm going to read it as as view container reference so now I've got a view container ref yeah totally it's gonna be fun right and we just got started and all I want to do is just take this component and render it inside my template all right so next I'm gonna use some dependency injection and I'm gonna bring some other stuff like the component factory resolver component factory resolver let's save it to the class and now if I want to render the component I can use the component factory breeze over and I can use the view container F and I can take import the component that I just created from somewhere where was it right here action button component and I can take this class and let's implement after viewing it and right here I can take this container use this function create component but I need to pass him something that angular described as component factory so I need to create a factory I'm just gonna call it ass because I'm lazy so I need to take a dis component factory resolver pass my component alright to create a factory and then I can take this factory then I can take this factory pass it right here to this container content created component and looks like fun yeah agree no one ever tried it before you see like you you're in shock in react is much easier actually if you want to do it well this is my action button works and I just needed to like inject tons of stuff I can save some time if I use this component ng component outlet so I can do something like this and just remove all of this completely create the enemy component right here and just pass it here all right same trick works so it was a bunch of API I show you some some low-level stuff but if you want to take a component and render it inside another component you need to be familiar with those classes with a family of classes that most of you aren't aware of maybe because you didn't had a chance to deal with this dynamic component rendering let's move forward there was a lot I just show you a lot of API and it seems very complexed and the challenge was pretty much straightforward I went to render something inside something but there is another problem with this kind of API if you want to render one component into it into each other they must know each other so you've got coupling between my app component and my action button component I need to import this class I need to specify exactly which class I want to render inside this component and this is something that we try to avoid we don't want different component to know each other make sense I want to sometimes and we're gonna and I'm gonna show you a practical examples for for this I want one component to be able to declare some part of UI and render it somewhere else without without it introduce those component to one each other so let's talk about portals all right flexible system for rendering dynamic content into an application we already talked about it so when we want to use this portal API we need to deal we need to learn about two concept first is the portal itself and portal is just a piece of UI it can be component and it can be just a template easy alright the other part is the portal host so we're going to create some kind of slot that we can just define somewhere in our template even on another component and render this portal into this portal slot alright cool we are gonna need all of these guys again but it's gonna be much much more straightforward I promise you we're gonna need from angular cdk port oh we're gonna need the city K port or class we're gonna need the dome total host all right and portal host some types that we're going to use we're gonna need this component factory resolver an application resin injector but it seems like a lot of code it's gonna make sense ready for some more live coding all right let's see how it works so get ready to another live demo and this one brought you by are you thinking of UJS if you are we can help you because I also organize react NYC so if you find yourself thinking of UGS or I just stop breathe and come visit one of our meetups well if you get through those thoughts I promise you we are a bunch of very nice people we just want the best for you alright so this is a kind of practical example of why do you want to use portals so I created a very simple app and if I dive into the code you see two directories components which contains footer and Network right network with some links this is the button from before we're going to use it and I've got some views just components that acts like pages cool right here on the module we've got this routing configuration so simple and straightforward let's we can take this down alright so you can navigate between different pages alright now we're going to implement some behavior right here on my home page I want to use the button that we used before so let's take this F action button let's make it a real button let's give it some styling danger right so I'm using this component right here on my home page and I'm gonna create a method on my home page on my home component so let's do this let's take the click and handle home click alright so now we've got a button and something what's wrong leftovers home is not defined where is home where is home life coding dog's bed and it's the phone with all right home component HTML so let's go back to home component let's find the world home somewhere father 15 here know where don't worry don't worry I'm ready to those kinds of situations so I've got a backup a backup plan yep let's take it out let's make sure that we rendering action button component is not a finite F module make sense let's take it out of here and we good almost no problem don't worry don't worry be happy let's commit this make sure we are on the right branch which is master yep and do a gate wizard which I don't have fun funfun we're gonna do it the hard way all right back to square one so we've got this app I can move some pages and I'm going to add a button to my template so I think this button was problematic I'm going to recreate this component real fast let's just call it action BTN with inline style inline template no testing and sweat promise you this now everything is gonna be okay trust me button again click me class just make it ready back to the home page and let's use it all right so this is the button and I'm going to catch the click and assign it to handle home click so every time I'm click you see edit the console cool fine for each one of the pages should be a button so if I go to the dashboard we're not going to implement all of them just for example if I go to the dashboard I've got this one instead of handle home click let's call it - click and just slug dashboard alright so on my dashboard I've got dashboard on my home I've got home click and everything seems ok remember designers crazy ideas so they came up with this with this instead of putting this button here on each screen you should have a button and this button should do something that got to do with the page that you're displaying so like home button when you click it you subscribe to an email dashboard when you click it I don't know you fetch data tasks when you click the button you add a task support when you click the button and you open a chat make sense right but instead of showing this button right here they want to display it right here on the nav bar so each time I'm moving through like routing between pages this button right here should be dynamically rendered like a context button make sense this is a real life example now we can do it it's not that crazy I've got this Network component and here is the button and I can do a lot of stuff here I can create dynamic button I can I can just use ng switch I can do a lot of stuff if you're using readouts or some kind of other state management in action I can create a third-party service but sometimes it's just an overkill what I really want to do I want to be able to define what the button does right here on my home component right here on this component but want it to be rendered right there on the navbar without introducing coupling between the two so the network knows nothing about the home component or anything let's see how we do it back to action button action button alright first I'm going to create an NG container then I'm going to create to use ng content and the reason I'm building this kind of wrapper is because right now I can use this container and every page can render whatever he likes so let's go back here grab this click and just wrap a button with the N it could be primary and this is dashboard alright make sense dashboard alright and of course because this button is is a dashboard button it should call method on the same class I'm going to do the same trick for the home component what's happened alright so same code right here but it's going to be handle home quick and on the home I want it to be a danger and home so again each component take care of its own button but what i just did i created a wrapper this app action button is just a wrapper and you can put whatever you want inside and it will keep the same context so unless if I'm wrapping a button right here on this component I'm on the same scope I can call my own method all right I just don't want the button to be shown here let me show how to show you how you do it so on an NG container on this class I'm gonna use portal I'm going to create a portal a cdk portal I'm gonna create a host for it it's gonna be a Dom portal host and I will need to use some of those fancy classes that I show you before like the component factory resolver so this is the component factory resolver I'm going to need application ref reference to my application oh sorry I'm gonna need reference to angular injector all right boilerplate code so I'm going to create a portal a host and I need those bunch of services next I'm going to use two lifecycle methods on this class after viewing it and ondestroy because if you're gonna if I'm gonna mess up with a component rendering I want to make sure that it's happening after my view was initialized next this is dependency injection you ask something in the constructor you get it great how do I create a portal so I've got here this energy container I'm going to use directive CD k portal this is enough for me to be able to use view child and grab this CD K portal from my template so now this one is the reference to this element make sense are you still with me I know it's a little bit advanced but you know it's fun great the actual code is going to drive all of this thing I'm gonna implement those interfaces so after the viewing it this host gonna be an instance of Dom portal host and don't portal host asked me for an element a factory resolver an application ref and an injector just yeah you can just tell me five minutes five minutes it's go alright just five minutes no pressure alright so as we see in this signature he needs all of those dependencies so I'm just gonna pass it I'm going to create a dome portal so I'm going to use document I'm going to query selector let's call this selector action what else you need a component factories over I'm gonna pass it to you you need an application ref no problem you need an injector no problem alright I created an instance of don't portal host now I've got this host I can attach excuse me attach the portal so if I walk through this code this is just boilerplate code but what's going on here I created this I define that this piece of template as a portal this is the piece the piece of template that I want to render somewhere and then I created an instance of a portal host giving him a real Dom API and some dependencies in it and then I attach this portal to this host the reason I put here ondestroy when this component destroyed I want to disconnect and this is my component and of course I'm going to share this code with you you can walk through you can learn how it works but I'm not going to touch it anymore actually it's very sophisticated I don't need to touch this template whatsoever next going back to our app it's crashing alright for a reason if you read here you see cannot read property appendchild off now I don't know exactly what it's made but I can see it's coming from don't don't portal from portal is 5 so I'm guessing the something trying to be rendered but it can't find some kind of element last piece of code remember the navbar instead of putting a button here I'm going to do this div and just use a simple ID with the same name that's it so here on the navbar I created an element which is going to act as a slot now in other places inside my in other components I can create buttons but I'm going they're going to be rendered right here all right remember this document query selector let's look at the end result look home dashboard right this button this home button was declared here at the home component but was rendered on the navbar switched to the dashboard this button was declared here on the dashboard component class where it's belong calling the same method but it was render somewhere else so I created a portal somewhere else in my app and I can render some piece of components on other places which is powerful let's summarize then I'm gonna tell you thank you portal are part of angular CBK cdk is a bunch of api's that help you build components is a bunch of behaviors google built it for you it's got nothing to do with styling or how it looks like but it can save you a lot of time if you need to create dynamic components so you should check it out you should play with it I know that it seems like a lot of code but once you you get the idea you can do crazy stuff like I show you so thank you very much for listening to this hardcore talk alright let's finish this met up with some hope for the future so yeah if you are like above 30 and you used Vista and you still can feel the side effects you know those nightmares and we can help you no I'm kidding I've got tons of this so come and come and end this before [Applause] you

Channel: AngularNYC

Views: 8,223

Keywords: Angular, Angular material, Angular CDK, Component Development Kit, portals, dynamic rendering

Id: YQMIR01dQew

Length: 33min 26sec (2006 seconds)

Published: Mon Sep 03 2018