Stencil | Nesting & Component Communication

00:00:00 welcome to another video in this mini
00:00:03 stencil serious in the last videos we
00:00:06 created a model which you are
00:00:07 unfortunately can't do right now because
00:00:10 we reintroduced our backdrop and we have
00:00:13 no logic to conditionally show or hide
00:00:15 this
00:00:15 now I explained towards the end of the
00:00:18 last video that you can basically open
00:00:20 and close the backdrop just like you do
00:00:22 it with my modal now that would be a
00:00:25 fine way and might be the best way if
00:00:27 you will plan on using the backdrop and
00:00:30 the modal independently for the sake of
00:00:32 this tutorial though I want to show you
00:00:34 how to nest components and make them
00:00:37 work together so let's have a look at
00:00:38 how this works in this video
00:00:44 to make the backdrop and the modal work
00:00:46 together I'll first a frolic get rid of
00:00:48 the backdrop in my index.html file it
00:00:52 now also might make sense to put them
00:00:54 into the same bundle here in these
00:00:56 stands the contact but for now I'll
00:00:57 leave it as it is now I'll go back to my
00:01:00 modal then and there I want to use that
00:01:03 backdrop it will require some
00:01:08 refactorings though to make the modal
00:01:11 display at the correct place though
00:01:12 because the whole modal position is
00:01:15 positioned in the middle of the page so
00:01:17 if we simply insert my backdrop here
00:01:20 like this it would be displayed in the
00:01:24 totally wrong place as you can tell if
00:01:26 we open oops if we reload the page and
00:01:28 open the model in what people had
00:01:31 displayed above of everything now to fix
00:01:34 this I'll get rid of the backdrop here
00:01:36 and I'll introduce a new component I'll
00:01:41 simply name it my modal bundle in there
00:01:47 I'll create a my modal bundle dot TSX
00:01:51 file obviously I don't need any styling
00:01:55 here I'll copy the TSX code from my
00:01:58 backdrop into there and exchange the tag
00:02:00 for my modal bundle and have my madlyn
00:02:06 get rid of the style URL I mean because
00:02:08 we don't have one change the class name
00:02:10 instead to my modal bundle now any
00:02:14 stance a convict again it would make
00:02:16 sense to put them all into the same
00:02:18 bundle though so I will do this and
00:02:21 comment out the other one so I have my
00:02:22 modal bundle here I have my modal in
00:02:26 there and I will also have my backdrop
00:02:29 all in the same bundle and therefore in
00:02:31 the same JavaScript file we output so
00:02:34 now with that back to the my modal
00:02:36 bundle I don't want to return null here
00:02:38 I actually want to return my backdrop
00:02:41 and my modal here I can do this by
00:02:44 simply outputting my backdrop no need to
00:02:47 add an import because it's a normal HTML
00:02:49 element and I can actually output an
00:02:52 array of elements there by using square
00:02:54 brackets and simply wrap
00:02:57 all the elements I want to output so
00:03:00 here my backdrop and then my modal if I
00:03:04 now do this I can go to the index.html
00:03:07 file and there I can simply output my
00:03:11 modal bundle
00:03:13 now of course my model relies on output
00:03:17 on input from the outside so we can
00:03:20 simply pass this input on by adding
00:03:24 these attributes to the my modal bundle
00:03:27 here and also exposing an open method so
00:03:31 here I would select my modal bundle and
00:03:34 call open on that so we need support
00:03:38 these functionalities so I need two
00:03:40 props and a method so let's import prop
00:03:43 and method and simply replicate what we
00:03:45 did in the last video from the my mom
00:03:48 modal TSX file I can import the true
00:03:51 prop statements here and add it to my my
00:03:55 modal bundle class and import the open
00:03:58 method with the method decorator let's
00:04:01 add all of that for that we also need to
00:04:06 import the element selector excuse me
00:04:09 decorator because we need to get access
00:04:12 to be my modal bundle element too so
00:04:15 let's also do this here now to show
00:04:18 backdrop and mold when open is triggered
00:04:20 I simply can use the conditional
00:04:23 rendering to decide whether I want to
00:04:25 output both elements or not so ever I
00:04:27 want to attach them to the Dom or not
00:04:29 for that I'll use state again in the
00:04:32 modal bundler and attach at state with
00:04:35 parentheses to show and by default this
00:04:39 could be false now when I call open this

00:04:43 show should of course be Drew and true
00:04:46 the sides where we output this array or
00:04:47 not so there again all may have a
00:04:51 content variable in render which is null
00:04:54 but if this show is true then content
00:04:59 will actually be this array so output
00:05:03 disarray in this case and I output
00:05:06 content here where I return content so
00:05:08 even nothing or back
00:05:11 and modal and for that I need to go my
00:05:13 to my modal in this s CSS file and
00:05:16 removed that display non thing because
00:05:18 it should always be visible it's just
00:05:20 not always attached to the Dom we could
00:05:22 now get rid of the open method in my
00:05:24 modal TSX I will leave it in there for
00:05:26 reference but we don't need it anymore
00:05:28 and with that if we save this and I
00:05:32 click opal now we see it again we see
00:05:35 show options we don't see the text
00:05:37 though because we need to pass this on
00:05:39 we already receive it in my modal bundle
00:05:42 we pass it in there from our index.html
00:05:44 file with title and content these are
00:05:46 props of my modal bundle these are also
00:05:49 still props of my modal so all I need to
00:05:52 do is pass them on so on my mobile here
00:05:55 I can simply set title equal to width
00:05:58 single equality braces this title
00:06:01 referring to the title prop of my modal
00:06:03 bundle at the same of course for content
00:06:06 content equals this content now with
00:06:11 that if I now reload this we see info
00:06:14 and so on again and show options
00:06:16 although still works and we can even
00:06:18 still close the modal though we do this
00:06:21 incorrectly we still do it by changing
00:06:24 the style of my modal TSX or of this
00:06:26 modal component we want to close the
00:06:28 whole modal bundle though and to do this
00:06:31 we actually need to event omit our own
00:06:34 custom event so in my Model T as X I can
00:06:38 import one more thing event and with
00:06:42 that we can well you guessed it create
00:06:43 our own event so just like a button can
00:06:46 emit a click now we can create a custom
00:06:49 event our custom component can emit and
00:06:52 in my my modal component I decorate a
00:06:55 property with at event parenthesis to
00:06:58 create this custom event now here we
00:07:00 could name this event on close and this
00:07:05 should be of type event emitter which
00:07:08 you also need to import from Stan's
00:07:11 liqueur and since I got a lot of imports
00:07:13 there now I'll quickly restructure this
00:07:16 to make it a bit easier to read so now
00:07:19 we also have event emitter there this is
00:07:22 the type of the on
00:07:24 property which is decorated with at
00:07:26 event now on its own doesn't do anything
00:07:29 but if we execute closed model handler I
00:07:32 no longer want to change display style I
00:07:34 will set show options to false though
00:07:37 and I will reach out to on close and
00:07:39 omit it now we could even pass some data
00:07:43 with it which we can then fetch in the
00:07:45 component where we listen to this event
00:07:46 but for now I just want you omit it in
00:07:50 my modal bundle I don't want to listen
00:07:53 to this event and for dad we import
00:07:58 listen now listen is an avid decorator
00:08:01 which we can add to a method for example
00:08:04 to the closed modal handler I add and
00:08:11 listen in front of it and add listen
00:08:14 it's an argument it needs the name of
00:08:16 the event to which I want to listen and
00:08:18 here it's on close and whenever any of
00:08:22 my child components so either backdrop
00:08:26 or by modal emits an event which is
00:08:28 named on close this method will get
00:08:31 executed so to do this I will now simply
00:08:36 execute this show or not executed but
00:08:40 set it to false
00:08:41 remember show is the property
00:08:44 determining whether we show or don't
00:08:46 show the backdrop and modal with dead if
00:08:49 I now save everything and I reload the
00:08:51 page if I click open model we see it if
00:08:54 I click OK we close everything and I can
00:08:57 then reopen it so this is now our custom
00:09:00 modal with nested components
00:09:03 communicating with each other and you
00:09:05 can of course see where this goes this
00:09:07 allows you to build powerful custom
00:09:10 elements and in the end what you use in
00:09:12 your HTML project is just this single
00:09:16 element now combined with some
00:09:19 JavaScript code to open it but it's only
00:09:21 because this is an element which we
00:09:22 actually need to interact with to show

00:09:24 modal it's not something you show all
00:09:26 the time but we just import our custom
00:09:29 element and we've got all that
00:09:31 functionality we built into all these
00:09:33 nested components out-of-the-box we can
00:09:36 ship this and
00:09:37 use this model in every future project
00:09:39 which is pretty amazing in my opinion
00:09:41 that makes it easy to create a set of
00:09:44 reusable pieces you can use in any web
00:09:47 project and it will just emphasize it
00:09:50 again including web projects where you
00:09:52 use a framework like angular or
00:09:54 something like that
00:09:55 now what I still want to show you is in
00:09:58 my model bundle we're listening to on
00:10:00 clothes and correctly you would say what
00:10:03 if my backdrop also emitted an on
00:10:06 clothes event but I actually want to do
00:10:09 something different on the on clothes
00:10:11 event of the backdrop then on the on
00:10:13 clothes event of the model now that
00:10:15 isn't the case here but it could be the
00:10:17 case that you have two conflicting
00:10:18 events which have the same name
00:10:20 obviously you could pick different names
00:10:23 but you can also change listen to
00:10:26 clearly define for which element you
00:10:28 want to listen my modal on clothes and
00:10:32 by separating this with a : unifying the
00:10:36 left part is the element my modal you
00:10:39 just specified a tag for which you want
00:10:41 to listen or on which you want to listen
00:10:43 and then on the right side of the colon
00:10:45 is the actual event and then you
00:10:47 conveniently execute this method super
00:10:49 easy to do super convenient and gives
00:10:52 you powerful tools to structure all your
00:10:55 components and have them work together
00:10:56 now this of course is just a quick
00:10:58 introduction to the core features there
00:11:01 is more to stencil but this already
00:11:03 shows you the power and how you make
00:11:05 both components with it see you in the
00:11:08 other videos hopefully

You may also like