Angular 2 Tutorial (2016) – Inputs & Outputs

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

You may also like