Coding

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