Coding

Angular 2 Tutorial – WTF are Components, Directives and Dataflow?

  • 00:00:03 every one I noticed that the videos
  • 00:00:06 which get the most interest on this
  • 00:00:09 channel are those about components and
  • 00:00:11 data binding now that's no surprise
  • 00:00:14 because components and the way we bind
  • 00:00:17 to them and how data binding works
  • 00:00:19 knowing that you is one vastly different
  • 00:00:22 to angular one and secondly it's the
  • 00:00:24 core of this language if you want to put
  • 00:00:26 it that way we will create our whole
  • 00:00:28 application by putting together
  • 00:00:31 components in the end so I thought it
  • 00:00:34 would be nice to have a special video
  • 00:00:36 dedicated to just this topic and show
  • 00:00:40 who you can nest components within each
  • 00:00:42 other and then bind data and let the
  • 00:00:45 data flow through those components to
  • 00:00:48 also show that unidirectional data flow
  • 00:00:50 we have an angular 2 so let's get
  • 00:00:52 started ok here we are first of all I
  • 00:00:57 increase the font size a little bit so
  • 00:00:58 it hopefully it's a bit easier to read
  • 00:01:01 now I'm sorry for any inconvenience and
  • 00:01:04 if you weren't able to completely follow
  • 00:01:06 along I recommend you try be watching it
  • 00:01:08 on a desktop PC and from now on I'll
  • 00:01:11 take care of that the font sizes
  • 00:01:13 appropriately sized now as you can see
  • 00:01:17 in my browser here I got a little demo
  • 00:01:20 app running and this app basically is
  • 00:01:23 there to demonstrate how we can combine
  • 00:01:27 components and how we can nest them and
  • 00:01:29 how we can let data flow through those
  • 00:01:31 components now designing web setting
  • 00:01:35 components isn't really a new abroach
  • 00:01:37 right because well if at least your
  • 00:01:40 writings on CSN is s and HTML you've
  • 00:01:43 been dividing up your web page in
  • 00:01:45 components and since years you have your
  • 00:01:48 header you have your main section where
  • 00:01:50 you might have a safe sidebar and then a
  • 00:01:52 Content section where you will have
  • 00:01:54 articles and then you have your footer
  • 00:01:56 that are sections and if you come from
  • 00:02:00 let's say server-side language like PHP
  • 00:02:02 you probably used templating engine very
  • 00:02:06 would also create your website from
  • 00:02:09 different components so therefore I find
  • 00:02:13 that that angular 2 follows are very
  • 00:02:15 logical and in
  • 00:02:16 if approached by using their components
  • 00:02:18 now what is a component a component is
  • 00:02:22 basically a directive which also has a
  • 00:02:24 view or a template which will be
  • 00:02:26 rendered to the screen so like let's say
  • 00:02:28 the ng-if directive is a directive the
  • 00:02:33 component we create is also a directive
  • 00:02:35 the app component our route component
  • 00:02:37 for example now the MGF directive
  • 00:02:40 doesn't have a few attach to it yes it
  • 00:02:43 might change the document due to the
  • 00:02:45 condition it has attached to it but it
  • 00:02:49 won't add something new or it won't
  • 00:02:51 really render a complete view it will
  • 00:02:54 just change something which we define in
  • 00:02:56 another template depending on a
  • 00:03:00 condition whereas a component has its
  • 00:03:02 complete own template attached to it and
  • 00:03:04 this will be rendered to the screen so
  • 00:03:07 in this case I got my master component
  • 00:03:10 here with this light lemon yellow
  • 00:03:13 background color and this master
  • 00:03:16 component if we have a look at it well
  • 00:03:18 it has a selector of master component
  • 00:03:20 and here's the template that's what will
  • 00:03:22 be rendered to the view the template is
  • 00:03:24 to having this input field and the
  • 00:03:26 button here and that those two
  • 00:03:29 components here now we can already see
  • 00:03:31 an advantage of this component approach
  • 00:03:33 I'm reusing components here I'm reusing
  • 00:03:36 my level 1 component within my master
  • 00:03:39 component so my master component
  • 00:03:41 template here I got one level one
  • 00:03:43 component two level 1 components and
  • 00:03:48 those components that that's one of the
  • 00:03:50 same component namely the level of one
  • 00:03:52 component I defined here increase the
  • 00:03:55 font size a little bit more so here I
  • 00:03:57 have my level 1 component and this
  • 00:04:01 component it has a level 2 component
  • 00:04:03 nested inside it now that level 2
  • 00:04:05 component in the end is let's say the
  • 00:04:08 ending point of our journey and it only
  • 00:04:10 has an input field and a button so
  • 00:04:13 that's how we nest components and how we
  • 00:04:16 reuse components and how we can put
  • 00:04:18 together our website from the different
  • 00:04:20 components we created so can really
  • 00:04:22 create a toolbox so to say with all the
  • 00:04:25 functionalities we need an our page and
  • 00:04:27 then we just add them together
  • 00:04:29 and through data-binding we have a
  • 00:04:32 powerful means to connect those
  • 00:04:35 components and yet to make sure that not
  • 00:04:38 each component is a separate part
  • 00:04:40 standing for its own and having nothing
  • 00:04:42 to do with the other components but
  • 00:04:44 instead else at connecting them with
  • 00:04:46 them now when it comes to that
  • 00:04:48 connection
  • 00:04:49 it's very important to to plan your app
  • 00:04:53 correctly because in general dataflow
  • 00:04:56 flow in and angular 2 is unidirectional
  • 00:04:59 and it always froze flows from parent to
  • 00:05:03 child to child to child so we get it
  • 00:05:06 from top to bottom and we can implement
  • 00:05:10 something to have a flow from bottom to
  • 00:05:12 top but that will only be possible
  • 00:05:15 through events so the general data flow
  • 00:05:18 is from top to bottom I can demonstrate
  • 00:05:21 you this in this example here let me
  • 00:05:24 enter some some text here in my master
  • 00:05:27 component and then click the Change
  • 00:05:28 button you now see every text field here
  • 00:05:32 changed why is that the case in my
  • 00:05:35 master component I have to change button
  • 00:05:37 this button has a click event attached
  • 00:05:40 to it which we call the unchanged method
  • 00:05:43 I pass the value of the text input and
  • 00:05:50 text input is just a local variable I
  • 00:05:53 created here and attached to this input
  • 00:05:54 if you're not sure about the data
  • 00:05:58 binding syntax with the parentheses here
  • 00:06:01 and what a local variable is I strongly
  • 00:06:04 recommend you check out my channel on my
  • 00:06:06 whole tutorial 0 series I have an
  • 00:06:08 angular 2 which is still growing where I
  • 00:06:11 will go much more into detail regarding
  • 00:06:13 that concepts so back to this I call
  • 00:06:16 this unchanged method here which gets
  • 00:06:18 the value which is just the value of our
  • 00:06:20 input field here from that local
  • 00:06:23 variable where we access the value and
  • 00:06:24 then I set my property text which I get
  • 00:06:28 here equal to that value
  • 00:06:29 now that property text is bound to my
  • 00:06:34 input text here but I won't need it as
  • 00:06:38 if now that would work even without that
  • 00:06:40 binding here more it is bound to
  • 00:06:43 that text directive I have on my level
  • 00:06:47 one component so I have it on both level
  • 00:06:51 1 components I'm using my text directive
  • 00:06:53 to pass the text property so the text
  • 00:06:56 and quotation marks refers to the text
  • 00:06:59 property whereas the text in the square
  • 00:07:02 brackets refers to the text directive
  • 00:07:04 which I created in the level of one
  • 00:07:07 component now might be bit confusing but
  • 00:07:11 in the end it's always to read this way
  • 00:07:15 this is let's say that the selector of
  • 00:07:19 Ayad our directive and this is what we
  • 00:07:22 what we pass or what what happens so to
  • 00:07:26 say let's have a look at our level 1
  • 00:07:28 component that is where we pass the data
  • 00:07:32 through this text and square brackets
  • 00:07:34 now in the level 1 component I have
  • 00:07:38 defined that this component can receive
  • 00:07:42 inputs through that square bracket
  • 00:07:45 syntax off in this case only the text I
  • 00:07:50 defined the text directive here this
  • 00:07:53 line defines it this makes it available
  • 00:07:55 in the master room component to use the
  • 00:07:58 square bracket text I can't enter what I
  • 00:08:00 want I can't enter test here and try to
  • 00:08:04 pass something because test is defined
  • 00:08:07 here on the on the level 1 component I
  • 00:08:09 only define text so let me get rid of
  • 00:08:13 that so that we don't get an error now
  • 00:08:16 that means okay I can receive some data
  • 00:08:20 bound to the text directive now what do
  • 00:08:23 I do with this data I just use it it is
  • 00:08:31 automatically bound to the text property
  • 00:08:33 here so those names have to match if
  • 00:08:37 they don't I have to provide an alias
  • 00:08:40 that's possible but in this case I'll
  • 00:08:41 leave it that way so property with the
  • 00:08:45 name text matches always to an input
  • 00:08:48 which has the name text which then again
  • 00:08:50 has to be matched here so if I were to
  • 00:08:53 change this to text too for example I
  • 00:08:55 would have to change
  • 00:08:56 here and then here our Vice the who
  • 00:08:59 binding would break but I'll just reword
  • 00:09:02 that so I bound to this text property
  • 00:09:07 now through this inputs element which on
  • 00:09:10 the same time allowed me to use the
  • 00:09:13 square bracket syntax and sense data to
  • 00:09:15 that component and that is why out of
  • 00:09:18 the box without any of that code we'll
  • 00:09:20 come to that soon it works that if I
  • 00:09:22 entered a text here and change it it
  • 00:09:24 will flow to all my components just
  • 00:09:27 because of that and that and then the
  • 00:09:30 fact that I bind my input element to
  • 00:09:34 that text property here I said to value
  • 00:09:36 to the value of the text property
  • 00:09:37 otherwise I wouldn't display
  • 00:09:39 automatically the data would still flow
  • 00:09:40 into the template but we wouldn't see it
  • 00:09:42 here because we wouldn't output it
  • 00:09:44 anyplace now I got the same procedure
  • 00:09:49 again I get this on change method here
  • 00:09:51 and when I click on it it will change
  • 00:09:55 the text value as the text property to
  • 00:09:58 the value just like we did in a master
  • 00:10:01 component it also does one other thing
  • 00:10:04 it emits and it went here we'll have a
  • 00:10:09 look at this in a second let me first
  • 00:10:10 come back to how the data gets passed to
  • 00:10:13 the level two component as I said when
  • 00:10:15 we click on change we set this text and
  • 00:10:18 it is also this text property and it has
  • 00:10:21 also set due to the fact that we pass it
  • 00:10:24 from the master component so those both
  • 00:10:30 actions kind of set this text property
  • 00:10:34 here now I'm also passing it to the
  • 00:10:37 level two component exactly the same way
  • 00:10:39 I passed from the master to the text one
  • 00:10:41 or level one and now passing it to level
  • 00:10:44 two and there for level two I have also
  • 00:10:47 my inputs and my text property which
  • 00:10:50 again has to match and then I out put it
  • 00:10:54 in my element in my input element here
  • 00:10:57 and that's why if I change it in the
  • 00:10:59 master it automatically fuse flows
  • 00:11:01 through all children because it gets set
  • 00:11:05 here this automatically is where it is
  • 00:11:09 to this level to text directive and
  • 00:11:11 therefore it automatically flows through
  • 00:11:13 to the text to so that is the parent to
  • 00:11:19 try to child data flew I talked about as
  • 00:11:23 you can see here we get a sibling and
  • 00:11:26 therefore well it's a child of the
  • 00:11:30 master component it flows through here
  • 00:11:33 now I will change it here in my first
  • 00:11:40 level one component to text five and I
  • 00:11:44 will I will change it and then let's see
  • 00:11:46 what happens it again changed in all the
  • 00:11:51 places to the bottom is clear because
  • 00:11:54 we're passing the text property so now
  • 00:11:56 we're passing it on because we're
  • 00:11:59 binding with that text directive here
  • 00:12:01 I think that's easy but how we did we do
  • 00:12:04 to let it flow back I just said that it
  • 00:12:06 flows from top to bottom right well as I
  • 00:12:10 said in the beginning we can trigger an
  • 00:12:12 event which will propagate or which will
  • 00:12:15 fire on our master component then and
  • 00:12:18 which allows us to change the value in
  • 00:12:21 our master component and that's one way
  • 00:12:23 on how to work our way up that notarized
  • 00:12:28 hierarchy so we do this by in our level
  • 00:12:32 one component here by setting an output
  • 00:12:36 which basically says this property is
  • 00:12:39 it's an event so to say it outputs data
  • 00:12:42 from our component where it's an input
  • 00:12:44 basically it says our component can't
  • 00:12:47 receive data the output output decorator
  • 00:12:50 here says our component can emit data
  • 00:12:53 and be aware I could also write it this
  • 00:12:58 way outputs changed would
  • 00:13:07 work exactly the same way as you see
  • 00:13:11 I'll just revert it because I wanted to
  • 00:13:13 show you both ways you can audit the
  • 00:13:15 same with input here you could also
  • 00:13:16 specify input so just wanted to tell you
  • 00:13:20 that now our output change creates a new
  • 00:13:23 event emitter now that has to be
  • 00:13:26 imported from the angular 2 core package
  • 00:13:28 and basically allows us to yeah emit
  • 00:13:32 events so to create a custom event so to
  • 00:13:34 say this is fired when I click this
  • 00:13:38 Change button in our level 1 component
  • 00:13:41 here as though fiery unchanged element
  • 00:13:44 and I set my text property like I do my
  • 00:13:47 master in my level 2 component but I
  • 00:13:49 also fire the event by just calling the
  • 00:13:54 emitted method on this changed property
  • 00:13:56 and I omit the value so the new value I
  • 00:14:01 got in my master component I have this
  • 00:14:08 changed event set up on my level 1
  • 00:14:14 component and changed is just the name I
  • 00:14:17 got here and it has to be the same name
  • 00:14:20 just with the inputs where text has to
  • 00:14:22 be text here it has also to be changed
  • 00:14:25 in the master component in square
  • 00:14:27 brackets or in excuse me in in
  • 00:14:30 parentheses because we have an event and
  • 00:14:32 then I call the unchanged event method
  • 00:14:36 or the unchanged method and passed the
  • 00:14:38 event that's important dollar sign event
  • 00:14:41 is always the parameter passed by
  • 00:14:44 angular 2 so you have to use that the
  • 00:14:48 unchanged method is the same I called up
  • 00:14:51 here by my if I click that button
  • 00:14:53 because it always receives the same just
  • 00:14:56 two value a string of any of those input
  • 00:14:59 fields therefore I just get this value
  • 00:15:02 which I basically pass here in my level
  • 00:15:05 one component and set it to the text
  • 00:15:08 property which will therefore change my
  • 00:15:10 text property and that's why if I type
  • 00:15:13 something here it will also change in a
  • 00:15:15 sibling component because it will flow
  • 00:15:17 up to my master and then it will flow
  • 00:15:20 back down data flow you that that's
  • 00:15:23 basically how data flows in angler to
  • 00:15:26 applications and if you know that you
  • 00:15:28 can figure out ways to manipulate it in
  • 00:15:30 a way you want to be now I defined the
  • 00:15:34 same and available to component I also
  • 00:15:36 got this changed event emitter and I'm
  • 00:15:38 omit does this event when I changed
  • 00:15:42 something here like t2 now you might
  • 00:15:46 notice let me actually zoom in a little
  • 00:15:49 bit so that this becomes clearer you
  • 00:15:52 might notice that if I write something
  • 00:15:55 here in a level one component it changes
  • 00:15:59 everywhere if I write something in the
  • 00:16:01 level two component tests changed by
  • 00:16:04 level two it only changes in a level one
  • 00:16:08 component it doesn't flow to my master
  • 00:16:10 and the sibling isn't it's also not
  • 00:16:13 touched in any way that is again because
  • 00:16:17 of the way data flows in angular 2
  • 00:16:19 applications we're triggering and it
  • 00:16:21 went here now level two component
  • 00:16:23 emitting it so to say which is then yet
  • 00:16:27 triggered in a level one component or
  • 00:16:30 which is then fetched in the level one
  • 00:16:31 component due to that changed event I
  • 00:16:36 define here this changes the text
  • 00:16:39 property into level one component but it
  • 00:16:41 can't go any higher than that because
  • 00:16:44 we're not emitting it here it would flow
  • 00:16:47 further if I were to call this changed
  • 00:16:50 emit in my on level two changed method
  • 00:16:53 which is fired when level two component
  • 00:16:55 changes in value then it would propagate
  • 00:16:59 up to the next layer which caused or
  • 00:17:03 which fetches that he went handles that
  • 00:17:05 event listens to it but I I don't have
  • 00:17:09 this method and master one or the master
  • 00:17:11 component isn't listening to any events
  • 00:17:13 fireable level two it's listening to
  • 00:17:15 events fired by level one components so
  • 00:17:18 that is why the data flows down and to
  • 00:17:20 all children but flow is up only one
  • 00:17:24 layer or only to a layer which catch
  • 00:17:27 that a wet or which listen to it okay so
  • 00:17:30 that's the basics or that are angle
  • 00:17:34 two components and data flow in a
  • 00:17:36 nutshell obviously there is much more to
  • 00:17:38 it if you're interested in more be sure
  • 00:17:40 to check out my complete angular 2
  • 00:17:42 tutorial series on my channel follow me
  • 00:17:45 on facebook under mindspace channel and
  • 00:17:48 yeah be sure to tune in to the next
  • 00:17:50 videos have a nice day bye