- 00:00:01 hey welcome back to another part of my
- 00:00:04 angular 2 tutorial series in this part I
- 00:00:07 want to focus on something which I kind
- 00:00:10 of have touched in some of my previous
- 00:00:12 videos words especially in my what the
- 00:00:15 or components data flow and so on
- 00:00:18 with you which is not actually a part of
- 00:00:20 this tutorial series and that is why I
- 00:00:23 wanted to get back to that topic in this
- 00:00:26 video inputs and outputs so ways to pass
- 00:00:29 data from one component to an hour
- 00:00:31 because it really is a core concept in
- 00:00:34 angular 2 and outputs is something we
- 00:00:37 haven't touched in this tutorial series
- 00:00:39 and we could also refer to that as cast
- 00:00:42 of events how we write custom events
- 00:00:45 which you can then trigger or fire in
- 00:00:47 our application and catch in some
- 00:00:49 component and pass data with those
- 00:00:52 command this events so I think that's
- 00:00:55 quite an important part of any angular 2
- 00:00:58 app because it's a part which will allow
- 00:01:01 us to let data flow up in the hierarchy
- 00:01:06 of components instead of only from top
- 00:01:09 to bottom so very important concept
- 00:01:12 let's get into it so I prepared a new
- 00:01:15 app here and by the way very important
- 00:01:17 the source code for this tutorial series
- 00:01:20 is now available on github you'll find a
- 00:01:22 link in the description below and there
- 00:01:25 I will have two branches at the moment
- 00:01:28 one for the app as we have built it
- 00:01:32 until now in all the past videos and now
- 00:01:35 for this video I created a new branch
- 00:01:37 because I don't really need my contact
- 00:01:39 list app which was at already getting a
- 00:01:42 bit cluttered with the HTTP and pipe
- 00:01:45 stuff so I wanted to start fresh and
- 00:01:48 don't have that messy first page where
- 00:01:51 we really focus on one part so therefore
- 00:01:54 at the moment two branches as I said one
- 00:01:57 for the past and one for this video
- 00:01:59 and I know I don't have my github repo
- 00:02:03 moment in a state where I would have the
- 00:02:06 source code for each video in the state
- 00:02:09 it was in this video but it's more the
- 00:02:11 latest source code but still you should
- 00:02:13 be able to follow my thoughts a little
- 00:02:16 bit clearer there may be if there are
- 00:02:18 some issues or some topics you're not
- 00:02:21 sure and you should also be able to read
- 00:02:24 the code in case you had problems with
- 00:02:26 that in the videos even though I'm now
- 00:02:29 always taking care about the font size
- 00:02:31 or at least try
- 00:02:33 so here brand new application where I
- 00:02:37 got a parent component and a child
- 00:02:39 component nested inside it and now let's
- 00:02:42 think how can we pass data which we
- 00:02:45 enter here in a parent component here to
- 00:02:48 our child component well this actually
- 00:02:51 is very easy and something we already
- 00:02:53 did a lot so I'll not talk too much
- 00:02:56 about that
- 00:02:57 we'll use input in our child which will
- 00:03:01 allow us to use property binding on our
- 00:03:04 child component here in our app
- 00:03:09 component to pass in a value to our
- 00:03:12 child so let's do that I'll first go to
- 00:03:16 my child component here and I will
- 00:03:18 create AB new property here which I will
- 00:03:21 just call parent value and this parent
- 00:03:27 value will be a string then I will
- 00:03:31 create a input here or I use the inputs
- 00:03:35 metadata which takes an array to specify
- 00:03:39 that parent value will be a input which
- 00:03:42 can be bound to this child component and
- 00:03:45 as always set this value has to match
- 00:03:48 this value and that then has to match
- 00:03:51 the value I use here my app component
- 00:03:54 where I use square brackets
- 00:03:57 parent value so the same name as in my
- 00:04:01 child component and I pass whatever
- 00:04:03 value I want to pass so in this case
- 00:04:05 whatever I entered into my input field
- 00:04:07 here so let me just assign a local
- 00:04:10 variable here
- 00:04:11 parent input and then I can pass
- 00:04:15 parent input value and now to actually
- 00:04:19 update the UI so that angular 2 updates
- 00:04:22 DUI I will have to bind a kind of a
- 00:04:26 dummy event to my input field here
- 00:04:28 whereas I out every key up yeah
- 00:04:31 basically do nothing that is why I set
- 00:04:33 the action to two mal to zero if it
- 00:04:36 doesn't do anything on key up but it
- 00:04:38 triggers a and UI update so that's
- 00:04:43 working and now let me go back to my
- 00:04:45 child component here and here I just
- 00:04:48 want to use string interpolation to
- 00:04:51 output parent
- 00:04:52 oops parent value now let's try if this
- 00:04:56 works yeah seems seems to work pretty
- 00:05:02 fine here good now actually I don't need
- 00:05:07 to click Me button here at all in in my
- 00:05:10 parent component at least so let me get
- 00:05:12 rid of this so this is how we bind it to
- 00:05:16 our to our child component now I want to
- 00:05:19 have the same thing here that right if I
- 00:05:21 enter something here it would be great
- 00:05:24 if this would then update it here in my
- 00:05:27 parent component so let me go to my
- 00:05:29 child component get rid of the button to
- 00:05:31 don't need it
- 00:05:32 and then I want to find a way yeah to
- 00:05:39 basically have the same behavior I have
- 00:05:42 from parent to child up from child to
- 00:05:45 parent right now I can't use input if I
- 00:05:48 try to specify inputs here on my parent
- 00:05:52 component and say like child value and
- 00:05:56 then I have here my property called
- 00:05:58 child child value which would also be a
- 00:06:02 string and then I have my string
- 00:06:05 interpolation here child
- 00:06:09 well you okay so then I get my input 0
- 00:06:13 this should be a string by the way so I
- 00:06:16 got this set up and in my child
- 00:06:21 component I would have like here my
- 00:06:26 input field a local variable
- 00:06:28 loud input and also on key up do nothing
- 00:06:33 um yeah how do we now pass it because my
- 00:06:41 app component I was able to use property
- 00:06:44 binding square brackets to access my
- 00:06:46 pass it to my child component but now I
- 00:06:50 don't have the possibility because well
- 00:06:52 I don't have my parent component here I
- 00:06:56 can't bind to it right so we will have
- 00:06:59 to find another way and what we will use
- 00:07:01 is output and output because from parent
- 00:07:05 to child we can use it input we pass
- 00:07:07 something into our child and now we want
- 00:07:10 to get something back from our child or
- 00:07:11 parent and that's why that's why we use
- 00:07:14 an output we're getting something out of
- 00:07:16 our child that's the way to think about
- 00:07:19 it putting something in getting
- 00:07:21 something out so we need an output now
- 00:07:26 let me get rid of this input here my
- 00:07:28 parent component we're not doing
- 00:07:30 anything there and my child component
- 00:07:34 I'll created outputs or at the outputs
- 00:07:37 metadata which is also an array where I
- 00:07:40 will have yell outside I call this well
- 00:07:44 this will be an event kind of put that
- 00:07:47 way this will fire and then I want to
- 00:07:51 catch it in my parent component so we'll
- 00:07:54 just set it to the name child changed so
- 00:07:59 events styled name um this will be a
- 00:08:05 custom event will create here and an
- 00:08:07 event we will have to fire by ourselves
- 00:08:09 and therefore we use the event emitter
- 00:08:13 so we have to import it from our angular
- 00:08:16 2 core package here too and now I can
- 00:08:19 create a property child changed which is
- 00:08:22 a new event emitter and this event will
- 00:08:27 pass a string therefore this is a
- 00:08:29 generic type I will set you type string
- 00:08:33 and what I can do now is when this
- 00:08:37 changes here on key
- 00:08:39 I'm not executing a dummy function or
- 00:08:42 I'm not setting the to zero instead I'll
- 00:08:44 execute on change method which it will
- 00:08:49 create here my child on change and here
- 00:08:54 I will get the current let's say the
- 00:08:57 value of my input passed into it so I'll
- 00:09:00 pass my child input value into this
- 00:09:04 method and here I can do it's very easy
- 00:09:09 I'll execute or l access my child change
- 00:09:12 properties on my custom event and I call
- 00:09:14 the emit function on it emit is a
- 00:09:17 function defined in my event emitter and
- 00:09:20 this will basically fire the event and I
- 00:09:23 can pass whatever value I want to pass
- 00:09:25 in this case just the value of my input
- 00:09:29 field so this fires the event ad in my
- 00:09:33 app component I can now go to my child
- 00:09:38 kamon where I'm currently binding my
- 00:09:40 parent input and I will catch this event
- 00:09:42 by using parentheses like we always do
- 00:09:45 when we're using events just that key up
- 00:09:49 is a bolt and it went and now we're
- 00:09:50 catching our child changed you end which
- 00:09:54 hasn't built in but defined by ourselves
- 00:09:56 and now what I want to do if a child
- 00:10:00 changed is catched where it's fired in
- 00:10:03 my child and I'll catch here in my
- 00:10:05 parent well I wanna execute a function
- 00:10:10 and I can't just do the following
- 00:10:14 I can't just set child value equals
- 00:10:19 event dollar sign event that's very
- 00:10:22 important don't forget the dollar sign
- 00:10:24 that is the the argument angular two
- 00:10:28 will use two to store the data we're
- 00:10:31 passing through our custom we went so
- 00:10:33 this name is not something we can we can
- 00:10:37 change or we can choose here it's just
- 00:10:39 given the value we enter here when we
- 00:10:42 omit every event this value will always
- 00:10:45 be accessible through dollar sign event
- 00:10:48 don't forget this so dollar sign events
- 00:10:52 too
- 00:10:52 the value we enter into our input field
- 00:10:55 and then we just set it to child value
- 00:10:58 which is the property we defined here
- 00:11:02 they're really really simple in the end
- 00:11:05 now let's try this
- 00:11:07 I again enter something in my parent
- 00:11:10 component this works we saw that before
- 00:11:11 and now I will enter something in my
- 00:11:14 child component and as you can see this
- 00:11:18 work too and this is all the magic that
- 00:11:22 is to it
- 00:11:22 this is how we can pass data from the
- 00:11:24 parent child back from the child
- 00:11:26 prepared and more importantly work
- 00:11:28 equally importantly this is how we
- 00:11:31 define custom events and how we fire
- 00:11:33 them and now obviously custom events can
- 00:11:36 be used for much more than just
- 00:11:37 transferring some strings if we enter
- 00:11:40 something in a input field in our child
- 00:11:41 component we can use custom events to
- 00:11:44 yeah basically react on all kind of
- 00:11:47 things that might change and that we
- 00:11:49 want to catch in another component which
- 00:11:53 will be updated depending on the change
- 00:11:55 in another component right so maybe a
- 00:11:57 bit complicated but in the end just as I
- 00:12:00 said think of it like think of it like
- 00:12:02 this custom events are outputs our way
- 00:12:06 to get something out of a component so
- 00:12:09 something is emitted by the component
- 00:12:12 and inputs are something to to transfer
- 00:12:15 it into the component that is the cord
- 00:12:18 it is to it and now one more thing I
- 00:12:21 want to show you my child component I
- 00:12:24 got this parent value and I got this
- 00:12:25 child changed here now if we say ok
- 00:12:30 parent value is the name of the property
- 00:12:33 we want to use in our child component
- 00:12:34 but maybe it doesn't feel right to use
- 00:12:38 parent value here because we aren't
- 00:12:40 apparent maybe once you call this like
- 00:12:43 let's say just just the pass value or
- 00:12:48 any other name doesn't really matter so
- 00:12:51 let's call it pass passed value don't
- 00:12:55 know if that's better but just for the
- 00:12:57 sake of exercise we want to use passed
- 00:13:00 value here but we want to keep parent
- 00:13:03 value here very easy to do
- 00:13:06 which just use a colon here and we
- 00:13:08 specify the Elias which is used for our
- 00:13:12 input so if you save this and test it
- 00:13:16 again it still works even though we're
- 00:13:19 using past value here instead of parent
- 00:13:22 value and this is because I'm setting up
- 00:13:24 an elias with my colon here which says
- 00:13:29 okay it is the property parent value in
- 00:13:32 this component but it is accessed
- 00:13:35 through my elias past value in our
- 00:13:38 components now obviously the same would
- 00:13:41 be possible for output you could specify
- 00:13:43 an LS the same way here another way to
- 00:13:47 specify an output would by de we be that
- 00:13:50 don't use the outputs metadata here just
- 00:13:53 use at output here but in this case i
- 00:13:57 don't know : but parentheses in this
- 00:14:03 case you will have to to import it so
- 00:14:09 you will have to import output from
- 00:14:10 angular 2 core and now it still works
- 00:14:15 it still works but now we get an output
- 00:14:19 here so whatever way you spell you you
- 00:14:21 prefer this way I guess you pretty fast
- 00:14:24 see which property is bound to 2 into an
- 00:14:28 output or which property is an input or
- 00:14:30 an event using it this way you don't
- 00:14:33 have to use all that metadata here or
- 00:14:36 those decorators here so it's really up
- 00:14:39 to you both ways work currently I don't
- 00:14:42 know of any best practice that is out
- 00:14:44 there so you're free to use whatever we
- 00:14:46 like see you in the next video bye