- 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