Pascal Precht - Angular Elements

oh hello everyone Oh how's everyone doing good great me too it's good to be back again sgb second edition and I'm super excited I can open up this conference I've never done this before so it's it's really a pleasure and an honor and I hope I can I can set the tone of the conference with this talk because I'm going to talk about angular elements which is a super new thing it's very new it's not even a thing yet it's not really released yet so I think that's going to be exciting I hope I hope you will like it right my name is Pascal you can find me on Twitter who's on Twitter here sorry oh that's a lot of people man cool - right there you can follow me if you want I'm a GD for the angular team so I try to help in the community giving feedback back to the to the core team but also helping everyone in community to be successful with with angular I'm also doing software training angler training with thought round with a couple of very talented talented people and since recently I'm working on a project called machine labs which is in which we're trying to make machine learning accessible to everyone also with a very group a very talented group of people so if you're into that kind of topic maybe you want to talk to me about that right so if you can't read something here because of maybe something's too small or anything the slides are up here I leave this here for like about 5 seconds otherwise just used to wonderful this place here I think they look quite good and then another thing you notice this logo right there ok one person in this room knows as long this is the angular lapse logo and angular lapses a project from the angular team under which you thinks are being tried out so it's like very experimental everything that you're gonna see today in this talk at least the anger specific things are very experimental that's what I meant with they're not actually release yet there are and somewhere in the code base but it's we're just playing around early stages probably even before alpha I don't know it's just like trying out new things and and see where things are going so so Inglot elements is a an angular labs project okay keep that in mind don't necessarily use everything that I'm talking about today in production yet okay I want to start with a little bit of a background um it happens that one of the core members of angular rock war mold he already gave a talk about this topic earlier this year and he started off with a with a pretty good like statement and I very much agree with that his statement was this is Rob by the way he said angular is ideal for building complete applications and our tooling and documentation and infrastructure are primarily aimed at this case so this doesn't mean that angular is like the most ideal framework out there or platform or whatever right the the point here really is that angular is very good at building complete applications right there's still a lot of things that that need to be ironed out and there's a lot of work to do in many different layers and angular that you know what we can all do better but I think we can all agree that angular is really good at building complete applications and and what does complete applications actually mean well it turns out that angular comes with so many things right we have the core with like a compiler that allows us to do things like a ot compilation for faster applications we have dependency injections we can like you know write tests in a sane way we have you know zone support and and and then there's other things like an upgrade module we have a router we have animation so even all of that on the slide right there's like HTTP support there's forms you know you get all of that out of the box for free even right so that's that's so awesome and then we have even like libraries that build on top of that like angular material which is like UI library implementing the material design specification from Google which is cool also like we can just take it up take it github or whatever it's right there high-quality components we can use them and and all ready to go and we have like tooling support is very good we have a CLI we have like a browser extension augury that helps us developing applications and language services to have better tooling or ID ease and you know and whatnot so angular is is pretty good at that and still there's as I mentioned earlier there's still some things where we can do better and Rob continued and he said it's quite challenging to use angular in scenarios that don't fit that specific single page application well what does that mean well it turns out that using angular inside angular apps is is all great and that's where we can build complete applications and everything but it turns out using angular outside of angular is rather like a tricky thing and there are various use cases for that right the probably the the biggest one is reusability of components like when you have a like a bigger company of several different teams working on different projects and you maybe even start building up a library that your own kind of component library inside of your company with your own like company IP and everything you want to use these things across your projects that's something that that could be tricky or CMS pages I was surprised how many people out there and actually actually do that like there's people came to me and asked like they were like talking about scenarios where they're working on content management systems where they try to yeah generate like building blocks that are just like mini angular apps if you will or you have like multiple static websites that's what most of the time CMS's are at least the older ones and then you have to like kind of build multiple apps for that so that's using use case another one is like building widgets there might be some overlapping there but you know maybe you want to provide some sort of widget that other people can actually embed in their website and they just get like a you know like a mini app that they can use and there's probably many more use cases so considering that there there's ways to make that possible so it's kind of possible to do these things with a note today but it's not necessarily very easy right this really turns out to be rather tricky and when we think about these things I mean it's angular is not the only platform or framework with with these problems I guess you will find similar challenges and other frameworks as well we might wonder and we might ask ourselves what if there was a component model and the web that solves these problems right some independent component model that enables us to just build components from throw them on the page and then it just works magically right I know some people might think all right we have web components for that all right who knows web components here okay well that's that's a actually less than I thought cool then then we can make a little detour so web components is a it's it's a technology or rather it's it's actually a like an umbrella term for four different technologies four different specifications right there's HTML templates there's HTML imports there's shadow Dom there's custom elements so these are all like different specifications and you can use all of them independently like you don't have to use all of them you can just pick one if you want you can pick two if you want to you or use all of them but at the end of the day when we are talking about web components we often refer to a combination of all of these or maybe just one of these most likely custom elements and yeah let's take a quick look at what what those things actually are just so that we get an idea of how the web tries to solve this problem of having a component model for for the web a native one so templates right templates are finally a way in in HTML to define templates in templates I don't know maybe you're used to things like defining templates as script tags with like source template you know like hex like that the template tag is the thing that actually enables us to define a template in our documents and we can instantiate those later at runtime so they're there they're sitting there they're static they're also inert which means if you have any media related elements like images or videos or whatever they don't start playing they they're not going to be fetched automatically which is otherwise the case in the browser right they're sitting there waiting for you to be activated so you can take this template and put it somewhere in your in your app and then stamp it out so that's what what template is and if you're usually angle you might you might have seen the ng template tag which is not just really inspired by this it's actually kind of a successor to this because originally angular used the template hack as well so angle uses that more or less if you will another thing is HTML imports it turns out that we have different ways to import things and our HTML documents for example we have the image tag to import images we have like like link tags to import ear style cheese and these kind of things but we don't really have a way to or we haven't had a way to really import HTML files right there was just no way you know apart from from frame sets or iframes in HTML ports is a specification that tries to solve that right you can basically go ahead and import an HTML file with a with a single tag but it turned out that it also comes with a lot of other problems when when you have like components with repentance ease and and dependencies of dependencies so vendor browsers are they kind of abandoned it and and it's not gonna likely not likely going to be implemented in all the browsers anymore shadow DOM is the thing that enables dom and style encapsulation what does that mean basically when you put an input tag type date on the website and you get a date picker just like that without doing anything else that's shadow dom right it's a it's a dom behind the dom that's why it's called shadow dom and it gives us style encapsulation and dom encapsulation with me which means styles defined inside the shadow dom don't bleed out of your page or into your page and styles defined in your page don't bleed into the components so you truly have encapsulation behind an element and the last one that's the important one that I want to focus on today is custom elements that's the specification that allows you as a developer to create new elements it's blinking right there so it's that's where where the party is it turns out that Engler is actually a thing that already tries to solve this since like many years right we can build components and direct us and they all have like we define custom elements and extend the browser vocabulary and custom elements is the native equivalent to that if you will so let's say you want to build a loading spinner right loading spinner attack you put it on the page you get a nice spinner or you know maybe even can configure it that's that's what it should look like and custom elements are really just like normal like native Dom objects or elements so they come with things like attributes properties methods and events it's all the same we're all doing this since many years right if you if you know how to use native Dom elements you know how to use custom elements how do we find custom elements well this is what it looks like we have a class loading spinner we have to extend the native HTML elements and then there's a API on the global object of the window object custom elements and then dot define and what you do so you keep it the name of the tag and then you pass in your your definition and that basically registers your custom element until that happens the thing in your document the loading spinner is a like an HTML unknown element that's how the browser sees it it's not an error it's just kind of more or less ignores it that's what browsers do they they yeah they do this thing called I'm graceful degradation so there's no error they just have a Dom element that they just don't know until the point a custom element is registered they also have attributes so what we can do is we can define observed attributes which means for example we could have a like an attribute mode in which we want to define whether the loading spinner is like loading like forever or if it has a certain state and only loads until a certain like value 50% or something so we can configure observed attributes and then all we have to do is we define an attribute change callback for example we check the value and then we might want to do something so whenever like an attribute has changed we might want to render something differently or something and in the and the document we use it like this right we have the loading spinner we say mode in and determinate in this case we can change it to something else inside the custom element we can react to it okay cool there's also properties right we can use getters and setters in this case we're actually getting the value when we ask for probably from the attribute and we're setting it also to the a Trebek when we're changing a property this is what's called property reflection so you make change in property you effect it back into the attribute those are two different things and then we can do something like this which is query selector our elements and then we can just set properties because it's just JavaScript after all right and again we know how to do that we do exactly the same thing with native elements same thing just that it's our custom element there's custom events as well right maybe we have a like a moat change event that we want to have that people can react to and we do it like this there's a custom event API we give it a name we can even pass it some some additional data like a payload that comes with the event and and then we can dispatch that particularly event and once that is done again we can go ahead we carry our spinner using using like Dom API and then we can add an event listener with that new name just yet another event just like click or change or whatever so we can do all that another thing that's interesting is that custom elements have so-called reactions and reactions are basically lifecycle hooks for custom elements and maybe that's something you've already heard before right so there's obviously constructor so when you instantiate a custom element this thing is going to be executed there's the connected callback every time the every time a custom element is being like attached to the Dom this thing is going to get called there's disconnected callback in case you're removing a custom element from the page and there's the attribute change callback the one that we've already already seen there call reactions and again this sounds all very very similar it turns also turns out that custom elements inside angular already work very well right if we take a look at this this is basically like an example of what I like an angular template could look like we have the loading spinner we have a property binding for the for the mote property right that's where we're using the property binding syntax with the angle bracket with the square brackets we can bind to attributes as well if you want to with expressions we can we combine two events in this case its mode change or we can yeah we have another property binding for value in case the mode is a different one so angular has been designed for this from from the very first day right that's also why we have that syntax because angular enables us to to bind to any property of any Dom object or Dom element and it also enables us to bind to any event of any Dom element it doesn't matter if it's like a native one or web component like like this one right it works with web components out of the box and also we see that there's a lot of things very similar in like both worlds angular and custom elements if we take a look at it we have host binding in angular right it's the thing that lets you update attributes depending on certain expressions inside of your angular components there's the input thing in the input a decorator excuse me let me get some water because I'm getting very dry here so there's input properties for property bindings we have outputs for for our custom events when we create components and then there's a lifecycle hooks right ng on in it and changes ng after viewing it and all these things which are kind of the equivalent to reactions now if we take a look at that we might think what if we could take these angular components that we're used to build you know every day and and getting a web component out of that so that it automatically works everywhere right so that we have like a standard based thing that would be great because it's not only just our own components that we but we can actually take all the great tools like material components and make them work everywhere just like that others do it to ionic for example team ionic has build a like a new compiler called stencil J's and they want to ship all their ionic components as stencil components that's their current goal right so you you basically write your components in a in a in stencil it's like if you will the language and it kind of has all the features cool features from different frameworks like angular and view and react and everything but at the end of the day it spits out a web component so it's the same thing if you will and that's exactly where angular elements come into play that's what angular elements tries to be angular elements are angular components packaged as custom elements right so they're basically custom elements on steroids if you will and they're designed to work outside of angular apps so this is literally to use outside angle apps not inside any labs because when you're inside angle app you can just use angle components right and again this is all we have an angle right now imagine you can take all that and just get a web component that works everywhere right okay so this is how it works three simple steps you create your component in angular with all the things that you know selector inputs outputs change detection dependency injection you get all of that right you just keep writing your components you create a custom element out of that and custom element again has like at would change callback they all the other reactions in this case it will actually get some additional API is that are specific to angular but at the end of day is really just a custom element it's called ng element and then this thing needs to be registered as a custom element and the good thing is these two steps here angular takes care of that so you just do your thing and tell angular to create a custom element out of that in theory so here's what happens on a nutshell right custom elements like angle components or angular self bootstrapping so they bootstrap themselves doing the connected callback you can put multiple of them on a page as standalone things and it just works for angular like from angler perspective it's really just hosting an angle component inside a custom element instead of a native element right so that's kind of the thing that's having the frame it's not very different and also what angle elements does it breeches all of the the Dom API s so the thing that we saw with the lifecycle hooks and reactions and attributes and and host listeners and input properties and properties angular takes care of that here so it's angular components on the inside but standards on the outside very important right consumers still just take custom elements they don't even know probably that they've been written in angular ideally and here's what looks like in code right so let's assume we have a hello world component we define a list of our components that we want to package s as custom elements we define our ng module because we know every component has to be part of an NG module we import all our browser ng module dependencies that we need in this case it's a browser module we declare our components on that module and what we also have to do in this case we have to add them as entry components and entry components in case if you don't know is this property on an NG module that defines all the components that are created dynamically at runtime so they're not like compiled from from the template we're not using them in any angular template really right that's that's what that is for and then we need another thing here because since we will still have to bootstrap this module to come to create like to compile these components we still have to bootstrap it but we don't have a bootstrap property with a component that we want to bootstrap but it's required to have either a bootstrap property or this ng to bootstrap lifecycle look I think this can definitely be improved in in terms of ergonomics and this is what we have to do today and then we can go ahead and import something called register as custom elements which is something that angular elements provides we import our our list of components that we want to register as custom elements and our module and then we just go ahead and we say register as custom elements we give it all of the components we want to register as custom elements and then we bootstrap our module and once that is done we just have you know we can write our application and just write normal code and this works with äôt as well obviously so that's the code side and I said on Twitter that NGB he's gonna be the first conference I'm actually gonna do some live coding this is gonna be the moment now so keep your fingers crossed yeah thank you well actually actually not wait until I'm done okay so let's start very simple this right here is uh like an angular application we see it's like right here's the file tree we see we only have this app module file and on the right hand side we see the screen I'm going to close this real quick we start by let's just start with a HelloWorld component right so I'm going to go ahead create a component HelloWorld selector hello world and we have a template that maybe looks something like this hello and then either name or world and then do something like that and then we can say this is a hello world components like that oops and we probably want an input binding for the name which we have right there so this is our component then we need to put that on an NG module right so we create an NG module which has some dependencies to work in the browser which is the browser module I'm also going to at the browser animations module cuz we need that in a second when we do something else and then we add our hello welcome to the declarations of that module so we say declarations hello world component that's this one we add it to the entry components as well writes list of hello world component and this is a class export class say custom elements module something like that and as I mentioned we need something that bootstraps this module or well we bootstrap it somewhere else but there's this requirement of having this ng to bootstrap lifecycle hook did you do bootstrap that looks good okay that's right there and now we can go ahead works I go into the index.html file this is the document right there's no angular app right there this is really just plain document with just one headline and now I'm going to the idea is that I can just go ahead and say hello world we know the selector of the component is hello world right so I do this hello world hello world like that right and then it should just work all we have to do now is register these components would you know okay so it's just one as a custom element so we use this API register as custom elements and then we give it the list of components which in our case is just hello world component and the function which returns a module reference so we have to return platform browser dynamic bootstrap module and then this takes our custom elements money which we don't have right now import custom elements and we probably also need to hello world components hello world auto-completion can be very helpful like that right that's that and then when this is done we might or might not do something here right so we can do something like something like there's some things going on here but right now we don't want to do anything we just want to render this element and see if it works so if I run this we should see probably hello world on the screen it's always works yeah it's a word so again this is a like in elements and I can even go ahead since we have an input binding if you remember I can go ahead and set the input as an attribute because it's a custom element and I say maybe this has a different name so I set it to my name and it says hello Pascal so that's working as well and you can also work with it obviously in the Dom as sorry in the in JavaScript so you can say something like you know like hello world components component equals document a query selector query selector hello world and then say something like set timeouts takes a function and we say we want to say hello world's component name equals Igor cuz he's not here right now and we do that after 2 seconds excuse me so we opened up again mm-hmm hope that it works after 2 seconds Igor yeah so that works so you see it's really just like a native element now just said it's a custom element with angular powers right let's take it one step further because I still have some time what if we can take angular material components and use them at just as elements right wouldn't that be great let's do that so let's extend the application and say close this again we want to have like the mats a tool bar and the mats toolbar module for that and we also want the mat radio button and the mat radio module and we get that from angular material something like that that's the idea at least okay and then we go to your module right here we add those module dependencies like that see I'm very slow in this editor I'm very sorry but this is better than nothing I guess so Matt's toolbar module and then we need the Matt radio module this one but we still need to define our entry components like the material component as entry components and I'm going to make it a bit shorter now by saying we have like a entry components list components components typing is hard and 100 people are watching components there you go so again hello world and we have my radio button and we have the Matt toolbar and this is the hello our component right thank you for pair programming with me it's good right there hello world component typos everywhere and then we can define them right here in this list entry components entry components hello world component is still declared in our module right this is owned by our module not by the angular material module and then we can go ahead import the entry components and just change it right here and say this is entry components components like that and there you go and let me actually remove this part right here and let's say we want now we want radio buttons and by clicking a radio button we want the name to change in our hello world component so we can go ahead and say we have a matte radio group I think it is I remember correctly yeah I think it is man radio group again those are now just elements and then we have a mad radio button button with a name which is the name in this case and the value here it's gonna be mine we have a label that and then we can take this thing we just copy it so I'm a bit faster change that to Igor Igor is the value Igor's also the label of the thing ego I wish you were here today right and now we can go ahead and say we get all the radio buttons so radio buttons radio buttons document a query selector query selector all radio button right this gives us all the radio buttons on the page and then what we can do is radio buttons for example we want to whenever a radio button changes we want to update the hell were component where your buttons for each but mmm and then we can say on every button we want to sorry oh sorry it's ER of course it's a function that gets the bun there you go and then on every every button that we have we want to add a event listener for the change event which it has and everything every time we're changing we want to check if if the radio button is checked or not so we can say if button that checked checked Wow typing is really hard and then what we want to do is oh I still need the hello world component I just deleted it I'm sorry hello world document query selector hello world like that and then we want to say okay we just update hello world dot name equals button dot value so whenever the buttons change and the button right now is checked we want to update the hello world component with that name let's see if that works okay so the first cool thing we see material radio buttons right there so they already render and now if I click them yay listen again material components angular material components as custom elements you can use them a virulent everywhere like that now awesome I'm so happy worked out first time so let's wrap it up because I'm really over time now um angular elements make your components reusable everywhere they might become angular's standalone component model in the future that's at least kind of the goal and obviously some things still need to be figured out you might have noticed that we still ship angular on the page cuz all the custom elements right now that are created from angular still live with angular zone anglers change detection and that kind of stuff so all the packaging stuff that still needs to be figured out early stages but I think it's a nice idea to see what's going on I want to say thank you to George and Rob because they helped me Rob for his togs and George really helped me by answering some questions and I have the links of the demos here and a couple of resources and thank you so much for listening and have a great time thank you

Channel: NG - BE

Views: 5,545

Rating: 4.8651686 out of 5

Keywords: angular, ngbe, conference, web, elements, webcomponents, javascript, typescript

Id: Hi2lRWUDuHA

Length: 33min 39sec (2019 seconds)

Published: Fri Dec 15 2017

Reddit Comments

[u/apatheticonion]

Very cool. I see that the components are initialized asynchronously - would this work if the selectors were done in $(document).ready() or the onload on the body tag? (Assuming ng components are being added to an older app)

[u/ibkin]

This is super cool! I would love to play with it but I am not sure how. Does anyone know what we need to do to get angular/elements working?

I know that there is a labs/elements branch on the Angular github project. Do I have to clone that, build the entire Angular project, and import the result into my test application?