- 00:00:00 welcome to this video in the last video
- 00:00:03 of this miniseries I introduced you to
- 00:00:05 stancil a nice compiler which allows you
- 00:00:08 to easily create your own web components
- 00:00:11 here's the web component we created in
- 00:00:13 the last video this little modal which
- 00:00:15 is always there now in this video I want
- 00:00:18 to add some logic that we can pass in
- 00:00:20 some data from the outside then we can
- 00:00:22 actually open and close it and improve
- 00:00:25 the styling a little bit so let's get
- 00:00:26 started with that in this video
- 00:00:32 we get our mold layer and first of all I
- 00:00:35 want to make sure that we can actually
- 00:00:37 open it that's not always there now for
- 00:00:41 dead you could go to the index.html file
- 00:00:43 and add a normal button in there a
- 00:00:46 normal HTML button where I say open
- 00:00:48 modal just like that not my model just
- 00:00:52 mold thank you now this is the button
- 00:00:55 I'll now add some script here
- 00:00:57 conveniently simply in the index.html
- 00:01:00 file so that we can have it all on one
- 00:01:01 screen
- 00:01:02 and in that script I now want to reach
- 00:01:05 out to my buttons stored in a variable
- 00:01:07 so I'll use document query selector here
- 00:01:10 to select my normal HTML button and I
- 00:01:14 will now say button add eventlistener
- 00:01:16 and add a click event listener add a
- 00:01:20 function here and then this function
- 00:01:22 won't you open the modal and alright now
- 00:01:24 we couldn't click the button because the
- 00:01:26 backdrop is always in front of it so
- 00:01:27 I'll comment out the backdrop and I
- 00:01:31 don't want to have the modal opened by
- 00:01:34 default now to make sure that the model
- 00:01:37 isn't open by default I'll go to the my
- 00:01:40 mol/s CSS file and add display non cuit
- 00:01:44 so now if I save everything we should
- 00:01:46 have a white page with only the button
- 00:01:49 in there the rest should be hidden now I
- 00:01:52 want to make sure I open the Mon when I
- 00:01:53 click the button one convenient way of
- 00:01:56 course is to simply reach out to my
- 00:01:58 modal and store it in a variable – with
- 00:02:00 queryselector and now my modal and I can
- 00:02:04 use my own custom element tag here just
- 00:02:08 like I could use button because it's a
- 00:02:09 normal HTML element now my custom
- 00:02:12 element but here to JavaScript in zone
- 00:02:15 it's like a regular element I can select
- 00:02:17 it like this and I could set my modal
- 00:02:19 excuse-me modeless the name of the
- 00:02:21 variable modal style display to block
- 00:02:25 because it's non by default block should
- 00:02:27 show it if I now save everything and I
- 00:02:30 clicked this button we see the model
- 00:02:32 without the backdrop because we
- 00:02:34 commented this out we'll work on this
- 00:02:36 but this is the modal this is one way of
- 00:02:39 doing this however there's also another
- 00:02:42 way which might be more convenient in
- 00:02:44 average
- 00:02:44 use cases would it be nice if our modal
- 00:02:46 just had something like open method we
- 00:02:49 could call I know it's a HTML element
- 00:02:53 but still maybe we could execute some
- 00:02:55 method on that open like we can call
- 00:02:59 button click on a normal HTML element to
- 00:03:04 expose such a method you can call from
- 00:03:06 outside I'll go into the modal and I
- 00:03:09 will import a new decorator it's called
- 00:03:13 method and I will use this method inside
- 00:03:17 of my class with the method decorator
- 00:03:20 and opening and closing parenthesis and
- 00:03:21 attach it to a method I add to this
- 00:03:24 typescript class I'll name it open the
- 00:03:27 cool thing is I could create a method
- 00:03:30 like this anyways but by adding the
- 00:03:32 method decorator to it I make it call
- 00:03:35 from outside though like I planted you
- 00:03:39 by simply calling modal open this will
- 00:03:43 be possible because open is a method
- 00:03:45 decorated with the method decorator and
- 00:03:48 hence callable now in there I could
- 00:03:51 change the style but I need to change
- 00:03:53 the style of the element itself
- 00:03:56 conveniently there all this a decorator
- 00:03:58 for this the element decorator I can
- 00:04:02 simply use this and assign it to a
- 00:04:06 normal property which I'll name modal l
- 00:04:08 but the name is up to you which will be
- 00:04:10 of type HTML element and I assign no
- 00:04:13 value the value will be set
- 00:04:16 automatically by stance or so to say and
- 00:04:18 it will be the element itself this
- 00:04:21 allows me to access it here and say
- 00:04:23 mol/l style display is try it is by his
- 00:04:27 german equals block will block like this
- 00:04:32 so with that I got my open method and
- 00:04:37 now if I reload the page and I click
- 00:04:40 this button I still open it but now on a
- 00:04:43 different way I call this open method
- 00:04:46 which is exposed to the public where I
- 00:04:48 then changed the style from with it so
- 00:04:50 these are two new decorators you learn
- 00:04:52 about element and method now you
- 00:04:55 probably want to pass some data when
- 00:04:58 giving this is to go to the index.html
- 00:05:00 file and maybe you want to set a title
- 00:05:02 which could be info and some content
- 00:05:05 which could be this is an important in
- 00:05:09 formation so we want to set two
- 00:05:13 attributes on our custom element to pass
- 00:05:17 in some data now to do this I'll go back
- 00:05:21 to my model and you saw this earlier
- 00:05:23 there's never decorated we can use the
- 00:05:26 prop decorator and I can use this to
- 00:05:29 attach it to properties of this class
- 00:05:31 like to the title property which will be
- 00:05:33 a string and also to the content which
- 00:05:37 will be a string and this allows me to
- 00:05:40 then output this here so I'll get rid of
- 00:05:42 this for now use parentheses to nicely
- 00:05:45 wrap this and in there I now want to
- 00:05:48 have a div which wraps this though
- 00:05:50 theoretically you could always return an
- 00:05:52 array here
- 00:05:53 so unlike and react at least prior to
- 00:05:55 react 16 you can return an array but
- 00:05:58 I'll still wrap it here and I'll give a
- 00:06:00 h1 tag where I now use this type of data
- 00:06:04 binding which you also might know from
- 00:06:06 react single curly braces and there I
- 00:06:09 want to output this title and then I'll
- 00:06:13 add a paragraph where I output this
- 00:06:16 content and the single quality braces
- 00:06:19 allow you to mix your JSX code with
- 00:06:22 references to your CF CSS to your
- 00:06:25 typescript class if you now save this
- 00:06:27 and you open the modal you see info this
- 00:06:30 is an important information now this is
- 00:06:34 already nice maybe add some padding to
- 00:06:36 this modal though it's all sitting on
- 00:06:38 the edge so in the S CSS file I'll add
- 00:06:40 padding 16 pixels maybe just a little
- 00:06:43 styling to make this a bit nicer to view
- 00:06:46 so that's important that's of course
- 00:06:49 nice what else can we do though well
- 00:06:52 maybe we want to have a button in there
- 00:06:53 which allows us to close the modal and
- 00:06:56 maybe we want to make this super
- 00:06:58 complicated and have a button which
- 00:07:00 allows us to show the button which
- 00:07:02 closes the modal eventually so we could
- 00:07:05 add let's say a horizontal line in there
- 00:07:08 and then a button and here we could say
- 00:07:10 show up
- 00:07:12 now let's style that button a little bit
- 00:07:14 so in my Model S CSS file
- 00:07:16 I'll nest the button selector inside in
- 00:07:19 my modal selector and there I'll remove
- 00:07:22 the background color by setting it to
- 00:07:24 transparent I'll remove the borders by
- 00:07:27 setting it to non and I will also set
- 00:07:30 the outline to non I will also set the
- 00:07:35 font to inherit so to use the ah font we
- 00:07:40 have up here Arial and so on if we save
- 00:07:43 all that reload the page
- 00:07:45 oops make sure to save DT as X file to
- 00:07:49 here we see show options options look
- 00:07:51 like it looks like this now we need more
- 00:07:54 styling we should add cursor:pointer
- 00:07:56 here to make it look like a pointer when
- 00:07:58 we hover over it and let's maybe add a
- 00:08:00 color like this orange color with fa9
- 00:08:04 q3f as a hex code with that we got the
- 00:08:09 show options button which doesn't do
- 00:08:11 anything when we click it now when you
- 00:08:13 click it as I said I want to show the
- 00:08:15 options below it so what we can do for
- 00:08:18 that is we can go to my model tsx and
- 00:08:20 first of all let's add a normal property
- 00:08:23 up there so maybe add it at the very top
- 00:08:26 I'll name this one buttons and shall be
- 00:08:30 an array where I have two strings like
- 00:08:32 ok and cancel so that's my array and it
- 00:08:37 isn't decorated with prop or anything
- 00:08:39 like that I also want to add a new
- 00:08:43 property which shall named show options
- 00:08:46 and this will be set to false initially
- 00:08:49 now with that I want to listen to a
- 00:08:51 click on this button and I do this by
- 00:08:53 adding on click to it now on click takes
- 00:08:58 these single curly braces and then a
- 00:09:00 reference to the method you want to
- 00:09:02 execute so that could be show options
- 00:09:06 handler and the handler at the end it is
- 00:09:09 optional it's kind of the convention you
- 00:09:11 see right now instantly components like
- 00:09:13 and react that you name the methods
- 00:09:15 triggered by your own listeners here
- 00:09:19 with handler at the end now in there I
- 00:09:23 could set this
- 00:09:25 show options to true so this property I
- 00:09:28 created here now all we need to do is
- 00:09:31 use the property to show more options so
- 00:09:35 here I could use a horizontal line again
- 00:09:38 and then I want to output all the
- 00:09:41 buttons I have here now since I stored
- 00:09:43 them in a property what I can do is I
- 00:09:47 can use these single curly braces to
- 00:09:49 output this buttons and then just like
- 00:09:52 in react I want to loop through all of
- 00:09:54 them and basically output an element for
- 00:09:56 each element in the array
- 00:09:58 technically what I'll do is I'll map
- 00:10:01 this array of strings into an array of
- 00:10:05 HTML elements of JSX
- 00:10:08 elements to be precise I do this by
- 00:10:10 calling the map method and there we have
- 00:10:14 a function which gets executed
- 00:10:15 automatically it's an arrow function
- 00:10:17 here but you could use a normal one
- 00:10:19 which will get executed for each element
- 00:10:21 in that array and give me that element
- 00:10:23 in each function call so a single button
- 00:10:26 so it will loop through all the elements
- 00:10:29 in this array and button therefore is
- 00:10:31 just a string so then I'll use
- 00:10:35 parentheses to structure this over
- 00:10:36 multiple lines I'll simply output a
- 00:10:39 button element here and in there I'll
- 00:10:43 again use single curly braces to output
- 00:10:45 button which is just string keep this in
- 00:10:48 mind so this will be the caption of the
- 00:10:49 button this should only happen if I
- 00:10:53 click this button here though so there
- 00:10:56 they call this show options Handler and
- 00:10:59 just like you might know it from react
- 00:11:01 again you need to bind this on this
- 00:11:05 method call otherwise it won't work
- 00:11:07 because this in show options handler
- 00:11:11 will not refer to your class here if
- 00:11:14 this is called at run time if you're not
- 00:11:17 finding this during development already
- 00:11:20 so there was a lot of work if we save
- 00:11:24 this we see that if we reload this and
- 00:11:28 up the pub modal we immediately see more
- 00:11:30 options which makes sense because we
- 00:11:34 have no logic to only conditionally show
- 00:11:36 them so I want to add this logic now
- 00:11:39 q at this logic we still use the same
- 00:11:43 concept use and react
- 00:11:45 there is no directive like we have an
- 00:11:47 angler or view there is no ng if instead
- 00:11:51 since we simply use JavaScript here in
- 00:11:55 the end in the render method we can
- 00:11:57 create a variable which will name
- 00:11:59 options that by default it's null so so
- 00:12:01 nothing then I will check if this show
- 00:12:07 options if this is true then I want you
- 00:12:12 cut the code from down there and set
- 00:12:15 options equal Q it whips wrapped in
- 00:12:20 parentheses what this basically means is
- 00:12:24 that and I know this can can look
- 00:12:26 strange if Ural looking at this the
- 00:12:27 first time the PI default this variable
- 00:12:30 is null but if this show options is true
- 00:12:33 we said it equal Q it looks like to HTML
- 00:12:36 but keep in mind that's just a nicer
- 00:12:38 syntax for JavaScript here so we sent an
- 00:12:42 equal Q an array of buttons and now we
- 00:12:45 can simply use this options variable
- 00:12:48 down there in our JSX code to output it
- 00:12:52 and it's even now if show options is
- 00:12:55 false this will never be overwritten and
- 00:12:57 then we actually don't want to output
- 00:12:59 anything but if show options is true
- 00:13:02 options will be an array of buttons and
- 00:13:05 we will render the buttons now let's
- 00:13:07 save this file and reload this page and
- 00:13:10 open the modal and if you click show
- 00:13:11 options nothing happens this actually is
- 00:13:16 to be expected stands for by default
- 00:13:18 isn't watching all your properties for
- 00:13:21 changes and doesn't rerender the Dom the
- 00:13:25 element if one of your properties
- 00:13:27 changes you have to tell it to
- 00:13:29 explicitly Ted watch one like show
- 00:13:32 options when show options changes we as
- 00:13:36 a developer know that this impacts our
- 00:13:39 template so to say our JSX code because
- 00:13:42 we use show options to decide what we
- 00:13:44 want to output buttons or not
- 00:13:46 so stancil should actually watch show
- 00:13:50 options we can tell it to do so
- 00:13:53 by adding another import state and we
- 00:13:57 decorate show options with at state this
- 00:14:01 might look similar to you from react
- 00:14:03 again there you also have state and if
- 00:14:05 you change state it rear Enders your
- 00:14:09 code here and react all the re-renders
- 00:14:12 of one of your props changes and that
- 00:14:14 would be the case here at you if this
- 00:14:17 changes set from outside of course it
- 00:14:19 would also rerender your template so now
- 00:14:23 since show options now is decorated with
- 00:14:27 state whenever we change it like this it
- 00:14:30 will rerender and if you were coming
- 00:14:32 from react you don't need to call this
- 00:14:35 set state or anything like that you just
- 00:14:37 change it like this if we now save this
- 00:14:39 and we reload the page and open the
- 00:14:42 model now if I click show options
- 00:14:44 it shows the options and I can toggle it
- 00:14:47 there now always there you could of
- 00:14:49 course alter the code to make this a
- 00:14:51 toggle functionality and set show
- 00:14:53 options to true if it's false and the
- 00:14:55 other way around now with the option set
- 00:14:58 of course want you close the modal
- 00:15:00 whenever I click OK or cancel for this I
- 00:15:04 simply need to add an onclicklistener to
- 00:15:07 my buttons and there I want to execute a
- 00:15:11 method which will name closed modal
- 00:15:14 handler again handler because it's
- 00:15:16 triggered from inside basically it's not
- 00:15:18 decorated with method and in there I
- 00:15:21 simply want to copy that code where I
- 00:15:23 set it to block and set it to non again
- 00:15:25 and here I will simply then call this on
- 00:15:31 excuse me not on closed modal Handler
- 00:15:35 and find this again and you could use an
- 00:15:39 arrow function your tool I can react if
- 00:15:41 you are coming from that background so
- 00:15:44 with that if we now saved us one more
- 00:15:46 time and real otis click show options ok
- 00:15:49 and cancel should both get rid of it and
- 00:15:52 we always see that if we reopen it
- 00:15:54 because we never have logic to switch
- 00:15:56 show options back to false we could of
- 00:15:59 course do this as part of the close mole
- 00:16:01 handler we could set this show options
- 00:16:04 back to false so that the next time we
- 00:16:07 this model the options aren't there
- 00:16:10 anymore so whatever doing a lot let's go
- 00:16:13 back to the modal which were not really
- 00:16:16 seeing we simply or if you also want to
- 00:16:19 open the modal well what we can do is we
- 00:16:22 called modal open here using the
- 00:16:25 backdrop I want to show the backdrop I
- 00:16:27 can comment it in again now it's always
- 00:16:29 there and we can't click the button
- 00:16:30 anymore so first of all let's go to the
- 00:16:33 backdrop and we can basically do this
- 00:16:36 just like we did it with the modal we
- 00:16:38 can make sure that we implemented we set
- 00:16:41 the display to non by default add an
- 00:16:44 open method and call the open method
- 00:16:46 like we called modal open nothing wrong
- 00:16:48 with that in the next video I want to
- 00:16:51 show you how you nest components though
- 00:16:53 and how you can then let the components
- 00:16:56 interact with each other
