Coding

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