Coding

Angular 2 Tutorial – Complete Introduction – Angular 2 CLI Setup, Components, Databinding

  • 00:00:00 hi welcome to this video this video
  • 00:00:03 contains lectures of the first two
  • 00:00:06 modules of my five-star rated udemy
  • 00:00:08 course on angular 2 and it will walk you
  • 00:00:11 through the very basics of setting up
  • 00:00:12 your angular 2 application with the
  • 00:00:14 angle at UCL I and then creating your
  • 00:00:17 components and using data binding by the
  • 00:00:19 end of the video you'll be able to
  • 00:00:20 create your first angular 2 applications
  • 00:00:22 and not only know how to create it but
  • 00:00:25 what you're doing there if you enjoy it
  • 00:00:27 definitely have a look at my full course
  • 00:00:29 to which you'll find a link in the
  • 00:00:30 description and with that I wish you a
  • 00:00:32 lot of fun with the video
  • 00:00:37 let me quickly go over what angular 2
  • 00:00:39 actually is it is a framework to create
  • 00:00:42 single page applications now that of
  • 00:00:45 course raises the next question what are
  • 00:00:47 single page applications let's first
  • 00:00:51 have a look at that traditional web
  • 00:00:52 application which means a server-side
  • 00:00:55 application we have a user who uses the
  • 00:00:58 client whore who is the client and
  • 00:01:01 simulate this for example by using a
  • 00:01:03 browser which is what we do all the time
  • 00:01:05 when we access the Internet we also get
  • 00:01:08 a server which holds our business logic
  • 00:01:10 our data and stores our website renders
  • 00:01:13 our website when the user clicks on a
  • 00:01:17 link for example the client will send a
  • 00:01:19 request to the server when the same is
  • 00:01:21 true when we enter a URL for example and
  • 00:01:24 the server will handle this request and
  • 00:01:27 well send back a response ad in a
  • 00:01:30 traditional web application where we
  • 00:01:32 only have a server-side language or
  • 00:01:34 framework we would send back a response
  • 00:01:36 which contains HTML code which the
  • 00:01:39 browser should render and finally view
  • 00:01:42 to the user now the problem here is that
  • 00:01:46 we got a lot of requests to the server
  • 00:01:49 with this approach for example we might
  • 00:01:51 visit example.com and this what is your
  • 00:01:55 request service since back HTML then we
  • 00:01:59 decide to wizard example calm about
  • 00:02:01 request response example.com account
  • 00:02:05 request response and you get my point
  • 00:02:08 for each different URL or we don't even
  • 00:02:12 have to switch your else for each
  • 00:02:14 request where something has to change
  • 00:02:18 we probably have to query the server to
  • 00:02:21 get back to new data or the new view we
  • 00:02:24 want to show to the user and with this
  • 00:02:26 approach we spend a lot of time sending
  • 00:02:29 requests and getting response as the
  • 00:02:31 server has to work with that the data
  • 00:02:33 has to travel through the internet so
  • 00:02:36 that is a lot of time that is spent on
  • 00:02:38 the task and this in turn will lead to a
  • 00:02:41 slow feeling of webpages do you know
  • 00:02:45 what happens if you use the apps on your
  • 00:02:47 eyes
  • 00:02:48 or on your mobile phone in general it
  • 00:02:50 feels very very fast most of the time
  • 00:02:52 and we want to bring that feeling that a
  • 00:02:55 polite feeling to the browser to where
  • 00:02:58 we don't have to load new pages upon
  • 00:03:00 each action therefore in a single page
  • 00:03:03 application the user still clicks link
  • 00:03:05 and this is handled by the client
  • 00:03:08 however the client handles that on its
  • 00:03:11 own and will rerender the HTML page
  • 00:03:15 through JavaScript so the server is
  • 00:03:17 totally left out here if it is possible
  • 00:03:20 if no data from the server is needed of
  • 00:03:22 course and the client can handle all
  • 00:03:24 that on its own that of course is much
  • 00:03:26 faster because we don't have to send any
  • 00:03:28 data over the Internet we don't have to
  • 00:03:30 wait for a response we don't have to
  • 00:03:32 render that response everything is done
  • 00:03:34 within the browser of course there are
  • 00:03:37 some times where we have to send a
  • 00:03:40 request because we might need some data
  • 00:03:41 from the server or some business logic
  • 00:03:44 which you can only store on the server
  • 00:03:46 in this case we will send a request and
  • 00:03:48 we'll get back a response but besides
  • 00:03:52 initial loading and server-side
  • 00:03:54 operations which are absolutely
  • 00:03:55 necessary we won't need that and if we
  • 00:03:58 do need it we will do it asynchronously
  • 00:04:00 which means we still rerender the page
  • 00:04:02 instantly to the user and we'll wait for
  • 00:04:05 new data to arrive and then incorporate
  • 00:04:07 that and well rerender with you again or
  • 00:04:10 whatever is appropriate this leads to
  • 00:04:13 enough different count of requests which
  • 00:04:15 we have to handle by the server we might
  • 00:04:18 with at example.com and we will need to
  • 00:04:20 query the server to get the initial HTML
  • 00:04:23 file which will hold our single page
  • 00:04:25 application however for the next request
  • 00:04:28 when we wizard the about page we might
  • 00:04:30 not need the server so no request is
  • 00:04:33 sent here if we access the account we
  • 00:04:36 might need some user data so here again
  • 00:04:38 we would make a server request but as
  • 00:04:40 you can already see we saved one request
  • 00:04:43 and with that a lot of time and even at
  • 00:04:46 the times where we do send requests
  • 00:04:48 especially the account page here we
  • 00:04:51 still provide the instant feeling or it
  • 00:04:54 is very reactive feeling to the user
  • 00:04:56 because we will handle
  • 00:04:58 response data asynchronously as we are
  • 00:05:01 able to instantly rerender the page
  • 00:05:03 fruit JavaScript therefore angular 2
  • 00:05:06 handles the incoming user requests or
  • 00:05:09 the winds which are sent through URL
  • 00:05:13 changes or Dom or mouse events issued by
  • 00:05:15 the user it then parses the URL to route
  • 00:05:20 appropriately and all stand on the front
  • 00:05:23 end in the angular 2 router no request
  • 00:05:26 is necessarily sent to the server here
  • 00:05:28 and finally it renders this new page by
  • 00:05:32 changing the parts of the dom which
  • 00:05:34 needs to be changed and the Dom of
  • 00:05:36 course here refers to the document
  • 00:05:38 object model so the HTML code in the end
  • 00:05:40 and that is done with JavaScript and
  • 00:05:43 therefore feels very reactive as it runs
  • 00:05:45 solely in the browser all that stand
  • 00:05:49 through directives components data
  • 00:05:51 binding and if you're not sure what all
  • 00:05:54 this means
  • 00:05:55 while that is what this course is about
  • 00:06:02 great so now that you learned what an
  • 00:06:05 angler to application is why you could
  • 00:06:08 use a lot you as a solution for your web
  • 00:06:10 project and at least in theory how it
  • 00:06:13 works and that components play a very
  • 00:06:15 important role I think it's time to make
  • 00:06:18 the step from theory to practice and
  • 00:06:20 start with the first application in this
  • 00:06:23 course so let's do this for this
  • 00:06:26 application of course also set the
  • 00:06:28 basics which you will need for all the
  • 00:06:30 other projects and examples throughout
  • 00:06:31 this course so the bare minimums your
  • 00:06:34 system should have two well create angle
  • 00:06:37 to applications but no worries it's
  • 00:06:39 really easy it's only one thing you'll
  • 00:06:41 need for this course and that is node.js
  • 00:06:43 so head over to noches org and then
  • 00:06:47 simply download the latest version for
  • 00:06:49 your operating system
  • 00:06:51 so simply click this link and then save
  • 00:06:53 it wherever you like once this is
  • 00:06:55 downloaded make sure to head fruity
  • 00:06:58 installer and install it on your
  • 00:06:59 operating system and you're good to go
  • 00:07:01 now you might be wondering what do you
  • 00:07:04 need no chess because we're creating an
  • 00:07:06 angle a to application not no chess
  • 00:07:08 right well we need it for two reasons
  • 00:07:11 one reason is yes we're creating an
  • 00:07:13 angular 2 application but that needs to
  • 00:07:15 be served from a tiny little server as
  • 00:07:18 well and well no chess is capable of
  • 00:07:22 running such a light white simple server
  • 00:07:24 as we will need it the second reason is
  • 00:07:27 throughout this course I will use the
  • 00:07:29 angular command-line interface or the
  • 00:07:32 angular 2 command-line interface to
  • 00:07:34 create all these examples and several
  • 00:07:37 well components or general pieces of
  • 00:07:40 those applications and you'll learn it
  • 00:07:42 throughout this course now no worries if
  • 00:07:45 you don't want to use the command line
  • 00:07:47 interface all the code we write works
  • 00:07:49 exactly the same way in your custom
  • 00:07:52 setup project and all the code is in one
  • 00:07:55 single source folder so you're easily
  • 00:07:57 able to convert well the code you see
  • 00:07:59 here or the structure you see here into
  • 00:08:02 your custom workflow additionally I also
  • 00:08:04 have a complete module on setting up
  • 00:08:06 your own workspace or workflow without
  • 00:08:09 ECL I however the CLI makes it real easy
  • 00:08:12 to create projects and that as well use
  • 00:08:14 it so as mentioned
  • 00:08:16 we're for the seal I will also meet no
  • 00:08:18 chess since well we need to know its
  • 00:08:20 package manager and p.m. to install the
  • 00:08:22 angular CLI in the first place and the
  • 00:08:24 CLI itself will also need note – well do
  • 00:08:28 all the magic for us so enough of the
  • 00:08:30 talking let's install the angular –
  • 00:08:32 saliva this can easily be done from the
  • 00:08:35 terminal or command line interface if
  • 00:08:37 you're on Windows and since you
  • 00:08:40 installed notes yes you have
  • 00:08:41 NPM notes package manager available
  • 00:08:43 therefore the only step required is to
  • 00:08:46 run NPM install – g2 install it globally
  • 00:08:49 on your machine angular CLI now this
  • 00:08:54 will work on Windows if you're on Mac or
  • 00:08:56 Linux you might need to add a sudo at
  • 00:08:59 the beginning to give just the right
  • 00:09:00 administrative rights then hit enter and
  • 00:09:03 well here on Mac I'm prompted to enter
  • 00:09:06 my password so I'm doing this real quick
  • 00:09:08 and then this will install the angular
  • 00:09:11 angular C live for me
  • 00:09:13 notice when I take a couple of seconds
  • 00:09:15 I'll CEO once this is finished at the
  • 00:09:18 end you should see something like this
  • 00:09:20 of course the version might worry
  • 00:09:22 whenever you watch this video but it
  • 00:09:23 should finish without an error then in
  • 00:09:25 the same terminal or command line window
  • 00:09:27 navigate into the directory where you
  • 00:09:30 want to host all your project folders
  • 00:09:32 once you are there simply run ng this
  • 00:09:35 will well trigger the angular CLI which
  • 00:09:39 has installed new to create a new
  • 00:09:41 project and then the name of the project
  • 00:09:43 which will also be the name of the
  • 00:09:45 folder so I'm going to call it first app
  • 00:09:49 now this will automatically install a
  • 00:09:52 couple of dependencies and so on it will
  • 00:09:54 also take some seconds so I'll be back
  • 00:09:57 once this is done see you then
  • 00:09:59 so now to set up you're finished and the
  • 00:10:02 angular 2 CLI automatically creates a
  • 00:10:05 tiny little app for you so let's have a
  • 00:10:06 look at this we can easily start up our
  • 00:10:10 little web server I was talking of
  • 00:10:12 earlier also managed and created by the
  • 00:10:14 angular angular CLI as well as our app
  • 00:10:18 by typing ng surf this will Wells well
  • 00:10:23 first we have to navigate into our newly
  • 00:10:26 created fold of the
  • 00:10:27 so now Angie's earth this will spin up
  • 00:10:30 this server and also keep the server
  • 00:10:33 running and whenever you change
  • 00:10:34 something in your app it will live
  • 00:10:36 update so you don't have to hit the
  • 00:10:38 reload button but we're not at this
  • 00:10:39 point yet so let's have a look at our
  • 00:10:41 application first over in the browser
  • 00:10:44 I'll have to localhost four thousand two
  • 00:10:47 hundred this is where this app is how as
  • 00:10:50 to that and you'll see first app works
  • 00:10:52 yay you created your first sigma2
  • 00:10:54 application though I see your point
  • 00:10:57 that we didn't actually do that much so
  • 00:11:00 let's dive into the code and change a
  • 00:11:02 little bit
  • 00:11:07 so I opened this project in webstorm my
  • 00:11:11 favorite IDE for angular 2 development
  • 00:11:14 sensei it ships with great angular 2 and
  • 00:11:16 typescript support however you may of
  • 00:11:18 course use whichever editor or IDE you
  • 00:11:21 prefer I know that Visual Studio 2015
  • 00:11:24 which is free at least a code version so
  • 00:11:28 did this basic version offers good
  • 00:11:30 typescript angle to support or you might
  • 00:11:32 choose sublime text or atom 8 editor
  • 00:11:35 with the right plugins that will
  • 00:11:37 certainly work as well anyways so we got
  • 00:11:40 this project structure and will that's a
  • 00:11:43 lot in one of the next lectures I'll
  • 00:11:45 talk about this structure at least its
  • 00:11:47 variable but their basics of it and in
  • 00:11:50 the angular seal I module at the end of
  • 00:11:54 the scores I'll go into a bit of more
  • 00:11:56 detail here the most important thing for
  • 00:11:59 us right now is to know that in this
  • 00:12:00 dist:4 here the compiled and finished
  • 00:12:04 code will live and in the source folder
  • 00:12:07 is where we edit our application so why
  • 00:12:10 do we have there's two folders well
  • 00:12:12 you'll see this in a later lecture when
  • 00:12:14 I talk about typescript but generally we
  • 00:12:16 will write our code in typescript not in
  • 00:12:18 JavaScript and therefore this will need
  • 00:12:21 to get compiled in order to run in the
  • 00:12:23 browser which is only able to surf
  • 00:12:25 javascript this is the reason so
  • 00:12:28 therefore here in this source folder we
  • 00:12:30 see our index.html file which is two
  • 00:12:33 file hosted by this mini server and we
  • 00:12:36 have this app folder now as I said I'll
  • 00:12:39 come back to the structure first let's
  • 00:12:40 have a look at the app folder here we
  • 00:12:43 have this first app component dot TS
  • 00:12:46 file and we got this HTML the CSS and
  • 00:12:49 the dots back ts file well that's backed
  • 00:12:52 up ts is for testing purposes and we're
  • 00:12:55 not having unit tests here so I'll get
  • 00:12:57 rid of this the other files here are
  • 00:13:00 important though if I open up this HTML
  • 00:13:04 file this might be the one we see right
  • 00:13:06 well we got h1 and then this title thing
  • 00:13:10 in the middle if we have a look at our
  • 00:13:12 running application this looks like a h1
  • 00:13:15 tag but it's not saying Kali brace Kali
  • 00:13:18 brace tyler crowe libre scully brace
  • 00:13:20 instead it says first AB words well
  • 00:13:23 that's because this is Anglet use
  • 00:13:26 template syntax and here we're using
  • 00:13:28 string interpolation a technical of
  • 00:13:31 course later learn in this course so
  • 00:13:33 basically here we're outputting some
  • 00:13:35 dynamic content where does this content
  • 00:13:38 for a come from well from this first a
  • 00:13:40 parent T asphalt which is the typescript
  • 00:13:43 code which will again later get compiled
  • 00:13:46 to JavaScript to run in the browser so
  • 00:13:49 this is the actual logic of this
  • 00:13:52 component and once it does look that
  • 00:13:55 much code here in this file it's quite
  • 00:13:58 important we get this component import
  • 00:14:01 here from the angular library or
  • 00:14:03 framework which basically allows us to
  • 00:14:06 make this class a component by adding
  • 00:14:08 this add component decorator and again
  • 00:14:10 I'll come back to that in the component
  • 00:14:13 module this is just a first up here then
  • 00:14:16 we basically have some configuration for
  • 00:14:19 this component and the two most
  • 00:14:22 important ones for us right now as the
  • 00:14:24 selector first app app and the template
  • 00:14:28 URL first app component on HTML which of
  • 00:14:31 course the HTML file I just had a look
  • 00:14:33 at so here this seems to be the file
  • 00:14:37 which gets loaded and first app app
  • 00:14:40 selector seems to be important for
  • 00:14:42 loading this component here and you will
  • 00:14:46 find the selector in the index dot HTML
  • 00:14:48 file which is the file serve by the
  • 00:14:51 server now here's a lot of code at the
  • 00:14:53 top and that's basically all from the
  • 00:14:55 angular CLI making sure that well the de
  • 00:14:59 life reloading is working then here this
  • 00:15:01 part is responsible for loading all the
  • 00:15:04 dependencies de imports we need to make
  • 00:15:08 our application run but then here with
  • 00:15:12 system import system chasis the module
  • 00:15:14 loader will we're using this app so
  • 00:15:16 basically a program making sure that the
  • 00:15:18 right files are getting loaded we're
  • 00:15:21 importing main now this will basically
  • 00:15:24 start our app and I will talk about this
  • 00:15:27 in a component section however here
  • 00:15:32 you see this first app app thing and
  • 00:15:34 there certainly isn't a default HTML tag
  • 00:15:36 this instead is the selector we
  • 00:15:39 specified in this type script file so it
  • 00:15:43 looks like the selector is important
  • 00:15:45 here because it allows us to basically
  • 00:15:47 create new HTML components or elements
  • 00:15:50 which you can place in our HTML code to
  • 00:15:54 load our components because this loading
  • 00:15:58 text here is certainly not what we're
  • 00:16:00 seeing we're seeing the content of this
  • 00:16:02 HTML file well and this dynamic content
  • 00:16:05 then interrupted into the content kind
  • 00:16:08 of so this is what we see and this
  • 00:16:11 indeed is how an angler to application
  • 00:16:13 works you create new components new HTML
  • 00:16:17 elements if you want to put it this way
  • 00:16:19 but it's a bit more as you will learn
  • 00:16:20 and then you can use them in your code
  • 00:16:24 now L said there's a bit more to it and
  • 00:16:27 you will learn this but basically this
  • 00:16:28 is how it is first app application runs
  • 00:16:31 and since we know that we know that this
  • 00:16:34 HTML file here is the right place to
  • 00:16:36 change something or it since we are
  • 00:16:38 outputting some dynamic content we
  • 00:16:40 search for this content this title well
  • 00:16:43 maybe you already saw it is here in this
  • 00:16:45 dot ts file here title first app works
  • 00:16:49 this clearly is the text we see here so
  • 00:16:52 if we change this to does this show up
  • 00:16:57 and I save this and all you do have to
  • 00:17:00 do is hit command or ctrl s to save you
  • 00:17:03 will see that your browser already
  • 00:17:05 updated and you see does to show up
  • 00:17:07 isn't that awesome
  • 00:17:09 and this is how you would generally work
  • 00:17:11 with that it's life updating and that's
  • 00:17:13 how you work with components you can
  • 00:17:16 change some content in your class here
  • 00:17:18 which you might output the HTML file or
  • 00:17:21 if you don't need dynamic content you
  • 00:17:23 may of course also enter anything
  • 00:17:25 directly into this file like hi I'm also
  • 00:17:29 displaying which will give us this
  • 00:17:35 paragraph here that's a for the first
  • 00:17:38 app and I'm pretty sure
  • 00:17:41 this was a lot of stuff you probably
  • 00:17:44 didn't know yet otherwise you wouldn't
  • 00:17:45 take the course you will learn
  • 00:17:47 throughout this Court though and this
  • 00:17:49 generally is how quickly you get set up
  • 00:17:52 with the angular CLI and in the next
  • 00:17:55 lecture I'll go briefly over this
  • 00:17:57 structure the most important things
  • 00:18:00 about the structure and thereafter
  • 00:18:01 you'll learn a bit of a typescript and
  • 00:18:04 then it's time to get started with
  • 00:18:07 components see you there
  • 00:18:13 so as promised just a quick overview
  • 00:18:15 over all the folders and files which
  • 00:18:18 were created by the angular CLI I will
  • 00:18:21 keep this brief
  • 00:18:22 on purpose because I don't want to bore
  • 00:18:25 you if you're interested check out the
  • 00:18:27 separate module on the Inglis Eli where
  • 00:18:30 I will go through that in a bit more
  • 00:18:32 detail and also explain how to use the
  • 00:18:34 angular CLI in general though you'll
  • 00:18:37 learn a lot of that by just following
  • 00:18:38 through that course I made sure dad well
  • 00:18:41 you're always on the same page as I and
  • 00:18:43 I'm not using any commands you don't
  • 00:18:45 know or understand so if you were not
  • 00:18:47 interested into details about a
  • 00:18:49 structure right now you might just skip
  • 00:18:50 this with you your so there okay so
  • 00:18:53 let's continue I'll give you all these
  • 00:18:57 folders and files from top to bottom
  • 00:18:58 while not through each file of course
  • 00:19:00 this conflict folder very easy hold some
  • 00:19:04 config and you probably won't need to
  • 00:19:07 change anything here as it is mostly for
  • 00:19:09 testing purposes the dist folder is the
  • 00:19:13 deployed or the both app and what you or
  • 00:19:17 the angular CLI builds our application
  • 00:19:19 whenever we change something and save
  • 00:19:21 this file this will then trigger the
  • 00:19:23 live reload of the browser and the files
  • 00:19:27 which are actually served the browser
  • 00:19:29 can be found in this test folder
  • 00:19:31 therefore we never write directly in
  • 00:19:33 that folder we let the angular seal I
  • 00:19:36 manage this folder for us and we need
  • 00:19:39 this extra folder since we're using
  • 00:19:41 typescript and this has to be compiled
  • 00:19:43 to JavaScript D CLI also supports
  • 00:19:46 compiling SCSS OSS code to CSS if you
  • 00:19:51 want to use that and anyways there are
  • 00:19:53 some optimizations which need to be done
  • 00:19:55 for example we don't need all the node
  • 00:19:58 modules all the dependencies installed
  • 00:20:00 here but just some of them and the
  • 00:20:03 required ones will be copied into this
  • 00:20:05 vendor folder here for example and all
  • 00:20:07 the development only dependencies will
  • 00:20:10 be left node marshals folder so that we
  • 00:20:12 don't upload unnecessary stuff on our
  • 00:20:14 server once we actually deploy the app
  • 00:20:17 that's the dist folder the e3 folder is
  • 00:20:20 for end-to-end testing and not
  • 00:20:21 interesting to us right now the node
  • 00:20:23 modules folder holds
  • 00:20:25 all the dependencies of our project
  • 00:20:26 including development only dependencies
  • 00:20:29 we need this for development but as I
  • 00:20:31 said for deployment all relevant
  • 00:20:33 dependencies will be copied into this
  • 00:20:35 vendor folder in the dist folder this
  • 00:20:38 public folder is empty you could store
  • 00:20:41 any files you also want to copy into
  • 00:20:43 your dist folder there so if you have
  • 00:20:46 some images for example or anything like
  • 00:20:48 that the source folder as I already said
  • 00:20:51 is the meat of our app here we're
  • 00:20:54 creating our application here we're
  • 00:20:56 working with components with typescript
  • 00:20:58 files with the templates and so on and
  • 00:21:01 basically here we get this app folder
  • 00:21:04 which holds all our typescript files and
  • 00:21:07 templates of our components and we get
  • 00:21:10 well this root folder with you are
  • 00:21:12 important in next our HTML file which is
  • 00:21:14 responsible for loading and starting a
  • 00:21:16 wrap this is the only file which
  • 00:21:18 technically gets served by the server to
  • 00:21:20 the browser to be rendered since we're
  • 00:21:23 creating a single page application and
  • 00:21:25 we get a couple of other files now I
  • 00:21:28 could talk hours about them but
  • 00:21:29 basically the main dot TS file is very
  • 00:21:32 important you'll learn more about it in
  • 00:21:34 the component section it's responsible
  • 00:21:36 for starting a poor application to give
  • 00:21:38 angular to this initial kick it needs to
  • 00:21:41 well run and to identify that this year
  • 00:21:44 this four-step app actually is a
  • 00:21:46 component so that's basically their
  • 00:21:49 important this is the file which gets
  • 00:21:50 import here mein refers to main dot TS
  • 00:21:54 or later in the compiled version main
  • 00:21:56 dot is of course system config is rel
  • 00:22:00 responsible for configuring system TS
  • 00:22:03 which is the marshall loader you see it
  • 00:22:05 in action here all these system commands
  • 00:22:08 and well this file might look very
  • 00:22:10 complicated and long it's very simple in
  • 00:22:13 the end basically everything down here
  • 00:22:16 asked this common sass is managed by the
  • 00:22:19 command-line interface and just make
  • 00:22:20 sure that all the dependencies get
  • 00:22:22 imported correctly and are a whale
  • 00:22:24 available to our application and up here
  • 00:22:27 well nothing is specified here you can
  • 00:22:30 later on change some things if you add
  • 00:22:33 for
  • 00:22:33 party packages for example and also
  • 00:22:35 check out the module on the Anglo seal I
  • 00:22:38 to learn more about that
  • 00:22:40 well this TS conflict a chaser file is
  • 00:22:43 important for D type script compilation
  • 00:22:45 and the default settings should be fine
  • 00:22:47 but whenever you need to change
  • 00:22:49 something but you should know what you
  • 00:22:51 do then you can do it here the typing
  • 00:22:54 starts DTS falwell is important for two
  • 00:22:57 things it declares one variable here
  • 00:23:01 which is used in all the typescript
  • 00:23:03 files which is important to not get
  • 00:23:05 compilation errors and more importantly
  • 00:23:07 or also as important it imports a couple
  • 00:23:11 of typing's now what are typing typing
  • 00:23:14 is kind of hard bridge between
  • 00:23:15 JavaScript libraries and typescript code
  • 00:23:19 you can mix typescript code with normal
  • 00:23:21 JavaScript code and indeed you'll often
  • 00:23:23 do but if you want to use a pure
  • 00:23:26 JavaScript library which was not written
  • 00:23:28 in typescript you need kind of a bridge
  • 00:23:31 if you want to get compiler support and
  • 00:23:34 IDE support like auto completion so that
  • 00:23:36 basically the typescript code knows
  • 00:23:38 which types the JavaScript code uses
  • 00:23:41 even though javascript doesn't have
  • 00:23:42 typings and that's exactly what the
  • 00:23:44 Taipings files here will define so this
  • 00:23:48 is generally optional it would work
  • 00:23:50 without it but you would get some errors
  • 00:23:52 there's a spider this year well and
  • 00:23:55 that's all for resourcefully I want to
  • 00:23:57 talk about right now
  • 00:23:58 now the temp folder here is very strange
  • 00:24:03 and basically does this need by the
  • 00:24:05 angular CLI during the build process
  • 00:24:07 nothing important for us typings folder
  • 00:24:10 of course houses typings I was talking
  • 00:24:12 about when talking about this typings
  • 00:24:14 file all the other files here also are
  • 00:24:18 providing some configuration for our
  • 00:24:20 project most importantly the angular see
  • 00:24:23 light or chase and file anti angular CLI
  • 00:24:25 both chase file which allow YouTube for
  • 00:24:29 example when working with third-party
  • 00:24:31 projects implement them here or
  • 00:24:34 generally change the basic setup of your
  • 00:24:37 application like for example the prefix
  • 00:24:39 you want to set for each selector by
  • 00:24:43 default where your source file lives and
  • 00:24:46 so on
  • 00:24:47 in general you don't need to change
  • 00:24:48 anything here so that was the put as
  • 00:24:52 brief as possible overview over the
  • 00:24:54 structure now who puts clear how all
  • 00:24:56 that works with that time to continue
  • 00:24:58 with the next videos
  • 00:25:04 so once typescript typescript is as I
  • 00:25:08 said a superset JavaScript it adds new
  • 00:25:11 features to the JavaScript language most
  • 00:25:14 importantly types but also classes
  • 00:25:17 modules and much more that makes up
  • 00:25:20 typescript and besides these extras it
  • 00:25:23 is JavaScript with but different syntax
  • 00:25:27 but not really that far away in the end
  • 00:25:30 the browser can't run typescript
  • 00:25:32 therefore typescript will always be
  • 00:25:34 compiled into JavaScript which is what
  • 00:25:37 the browser is able to read now you
  • 00:25:39 might ask how can we compile something
  • 00:25:41 which is not included in JavaScript to
  • 00:25:44 JavaScript well you can do that because
  • 00:25:47 for some things like classes there are
  • 00:25:50 different ways to write it in JavaScript
  • 00:25:52 and for things like types which simply
  • 00:25:55 don't exist in JavaScript we don't have
  • 00:25:58 strong typing in JavaScript well this
  • 00:26:01 will be left out but it's good to have
  • 00:26:02 it anyway because the typescript
  • 00:26:04 compiler will check those types and give
  • 00:26:07 us errors if we misuse types or use them
  • 00:26:11 wrongly so we get this extra level of
  • 00:26:14 security which is one of the biggest
  • 00:26:15 benefits typescript offers us because
  • 00:26:18 speaking of benefits why would you want
  • 00:26:21 to use typescript instead of JavaScript
  • 00:26:23 well there are some general reasons and
  • 00:26:25 some angler to specific ones the general
  • 00:26:29 reasons would be that you have that
  • 00:26:30 strong typing I just mentioned which
  • 00:26:32 means that you set which property will
  • 00:26:35 have which type for example that a
  • 00:26:37 property should be a string if you then
  • 00:26:39 try to assign a type which does not
  • 00:26:42 match the compiler and probably your IDE
  • 00:26:45 too will give you an error and that
  • 00:26:47 prevents you from making a lot of
  • 00:26:49 difficult to find errors as you look at
  • 00:26:52 this check right out of the box at the
  • 00:26:55 beginning so that's the biggest and most
  • 00:26:58 important feature as tiny as it might
  • 00:27:00 sound but it is not another reason is
  • 00:27:03 that you can use next-generation
  • 00:27:05 JavaScript features today for example
  • 00:27:08 classes imports and exports so that
  • 00:27:11 modular multi file approach and as I
  • 00:27:14 explained some of these things will
  • 00:27:17 transpile into two-day JavaScript cell
  • 00:27:20 prototypes and so on and some things
  • 00:27:23 might be left out but are still usable
  • 00:27:26 with the types of compiler to give you
  • 00:27:28 errors and so on another reason would be
  • 00:27:32 that you get missing JavaScript features
  • 00:27:34 like interfaces or generics now
  • 00:27:37 JavaScript doesn't have any similar
  • 00:27:40 thing
  • 00:27:41 however again the compiler knows that we
  • 00:27:45 for example want to have an interface
  • 00:27:47 which forces us to implement a certain
  • 00:27:49 method and therefore can yell at us if
  • 00:27:51 we don't do that and after the
  • 00:27:54 compilation step is finished yes we
  • 00:27:56 won't have to feature anymore but we
  • 00:27:58 don't need to because we already checked
  • 00:27:59 it before third so that are the general
  • 00:28:03 reasons now if you are not convinced and
  • 00:28:06 well you probably should be but if
  • 00:28:08 you're not let's talk about dealing or
  • 00:28:10 two specific ones very importantly
  • 00:28:13 documentation support is mostly in
  • 00:28:17 typescript and yes this will probably be
  • 00:28:20 added for pure JavaScript in the future
  • 00:28:23 but the maturity of examples and
  • 00:28:25 articles you find uses typescript so it
  • 00:28:28 makes your world a lot easier if you're
  • 00:28:30 using typescript to the questions why is
  • 00:28:33 that the case why is everything in
  • 00:28:35 typescript well because the angular 2
  • 00:28:38 team chose typescript as the main
  • 00:28:40 language so to say for angular 2 and of
  • 00:28:45 course it is due to the reasons you can
  • 00:28:47 find on the left in the general part and
  • 00:28:49 as all of this is the case
  • 00:28:52 this course will use typescript and I
  • 00:28:55 strongly encourage you to do the same so
  • 00:28:58 with that the question is how do you use
  • 00:29:01 typescript well if the angular CLI
  • 00:29:04 projects you don't have to separately
  • 00:29:06 install it because the project will
  • 00:29:08 automatically do that for you however
  • 00:29:10 you still might want to install it
  • 00:29:12 globally on your machine and you can do
  • 00:29:15 this with the serial on Mac on Windows
  • 00:29:18 leave out sudo npm install' typescript –
  • 00:29:21 G command and I'll do this in my machine
  • 00:29:24 because you might need it in other
  • 00:29:26 projects which are not related channel 2
  • 00:29:28 or and you will see this in one of the
  • 00:29:30 next
  • 00:29:31 when using TS lint which is a little
  • 00:29:34 support helping you to write clean and
  • 00:29:37 well formatted typescript code so I will
  • 00:29:41 quit my running server here for now and
  • 00:29:43 install type script by typing npm
  • 00:29:46 install' g type script and I should add
  • 00:29:50 sudo since our Maxwell do that enter my
  • 00:29:54 password here real quick and that will
  • 00:30:00 install typescript globally on my
  • 00:30:01 machine and in my case as I already had
  • 00:30:04 it just updated to the latest version
  • 00:30:12 so until now you saw your first
  • 00:30:14 application you saw you could change a
  • 00:30:16 tiny bit of it um we went through the
  • 00:30:19 project structure and all of that and
  • 00:30:22 that's nice but what's actually
  • 00:30:24 happening in an angular 2 application
  • 00:30:26 what's angular 2 doing and how do we
  • 00:30:29 build an angle application well of
  • 00:30:32 course with all these files but what's
  • 00:30:34 inside those files the core concepts of
  • 00:30:38 angular 2 applications are components
  • 00:30:40 and directives with components being
  • 00:30:44 directives now what's that well
  • 00:30:47 directives are instructions in the code
  • 00:30:49 in the HTML code telling angular 2 which
  • 00:30:52 is the application running over you code
  • 00:30:54 what to do and components are such a
  • 00:30:57 very important instructions which tell
  • 00:31:00 angular 2 how to render certain pieces
  • 00:31:03 of your application so if we have a look
  • 00:31:06 at our browser window here and we're on
  • 00:31:08 example.com well we probably see a
  • 00:31:11 header with products and about link for
  • 00:31:14 example and on the products page you
  • 00:31:16 might have multiple products kind of a
  • 00:31:18 sidebar on the right and all of these
  • 00:31:21 things here are components of course
  • 00:31:24 they are living on a kind of a route
  • 00:31:27 component a component holding everything
  • 00:31:29 together that is the app component you
  • 00:31:32 saw in the first app lecture where we
  • 00:31:35 had this app component being
  • 00:31:38 bootstrapped and the main dot TS file if
  • 00:31:41 you remember this and that's the core
  • 00:31:43 computer root component holding your
  • 00:31:46 application but then your application
  • 00:31:48 consists of multiple smaller components
  • 00:31:51 sitting on that root component and that
  • 00:31:53 is the key concept of an angular 2
  • 00:31:57 application when you're creating angular
  • 00:32:00 2 apps you'll be building components and
  • 00:32:02 component does not only mean HTML code
  • 00:32:05 which is rendered in a browser but also
  • 00:32:08 the logic behind that code so handling
  • 00:32:11 user events loading data doing
  • 00:32:14 calculations interacting with our
  • 00:32:16 components
  • 00:32:17 of course you because of course your
  • 00:32:20 points are and stand alone they work
  • 00:32:22 together so this is the key concept of
  • 00:32:26 energy and when you're creating an app
  • 00:32:28 you'll be bowling components which again
  • 00:32:32 have a view HTML code you see in the
  • 00:32:35 browser rendered as a web page anta
  • 00:32:37 logic attached to that HTML code and
  • 00:32:41 within each component you may have
  • 00:32:45 references or selectors of other
  • 00:32:47 instructions other directives or
  • 00:32:50 components so that you build up your
  • 00:32:52 application of these building blocks
  • 00:32:54 which then work together and make up
  • 00:32:56 your overall application because if we
  • 00:32:59 have a look at our web page here we can
  • 00:33:02 basically identify a couple of
  • 00:33:04 components we have our item components
  • 00:33:06 we have two sidebar component the header
  • 00:33:08 component and of course the root
  • 00:33:10 component I was mentioning
  • 00:33:16 back in the project this as I mentioned
  • 00:33:19 first app app component here has this
  • 00:33:23 extra app because angular seal I put
  • 00:33:26 this app there because this is the root
  • 00:33:29 component being started in this main OTS
  • 00:33:32 file on the bootstrap methods method
  • 00:33:34 which loads app or overall application
  • 00:33:36 so this is the root component holding
  • 00:33:38 our components and throughout this
  • 00:33:42 module you will see how we create
  • 00:33:43 several components and let them work
  • 00:33:46 together but for now I want to stick at
  • 00:33:48 this first app that component es file in
  • 00:33:50 this file you can see we got a
  • 00:33:53 typescript class which of course gets
  • 00:33:55 compiled to JavaScript as all the
  • 00:33:57 typescript code does and this class has
  • 00:33:59 a name of first app app component this
  • 00:34:01 class has a property title which is of
  • 00:34:04 type string and says does that really
  • 00:34:06 work we're exporting this class here to
  • 00:34:10 make it available outside of this file
  • 00:34:12 too so this is a module this is
  • 00:34:14 automatically transformed into a module
  • 00:34:16 which you can import using the import
  • 00:34:18 statement like we're doing it here at
  • 00:34:20 the top of this file for the component
  • 00:34:22 metadata we're importing from the
  • 00:34:24 angular 2 framework that being said
  • 00:34:27 that's a very important step this
  • 00:34:28 component metadata which you see
  • 00:34:30 attached right above this class you can
  • 00:34:34 see that we have an app sign at the
  • 00:34:35 beginning which indicates that this is a
  • 00:34:37 typescript decorator which allows us to
  • 00:34:40 easily add metadata to a class now
  • 00:34:43 rightfull you may ask what is metadata
  • 00:34:46 what's that how what does do well
  • 00:34:50 metadata is basically some additional
  • 00:34:52 information you attach to a class which
  • 00:34:55 you can't order want you include in a
  • 00:34:57 class body and which will tell
  • 00:35:00 JavaScript or in the end angular to what
  • 00:35:03 this class should be transformed to or
  • 00:35:06 give it some additional information
  • 00:35:07 otherwise this would be plain normal
  • 00:35:10 class and angler queue would not know
  • 00:35:13 that this is a component it should
  • 00:35:15 render to the screen and so on with the
  • 00:35:17 add component decorator angular 2 does
  • 00:35:20 know that and it knows okay this is a
  • 00:35:22 normal class and I will transform it
  • 00:35:25 into a component
  • 00:35:26 we'll use it like a component now what
  • 00:35:30 makes up a component some of the things
  • 00:35:32 we define here in this component
  • 00:35:34 decorator this component decorator takes
  • 00:35:37 a javascript object as an argument as
  • 00:35:39 you can see and then here we get four
  • 00:35:41 fields defined now be aware that there
  • 00:35:44 are a lot of the other fields too and
  • 00:35:47 you don't need all of the fields of the
  • 00:35:49 configuration for each component it
  • 00:35:51 depends on what your component does
  • 00:35:53 witch dependencies or other things this
  • 00:35:57 component might have and you will see
  • 00:35:59 them being added step by step throughout
  • 00:36:01 this course this component here has a
  • 00:36:04 module ID and we'll come back to that in
  • 00:36:07 a second it has a selector too and this
  • 00:36:10 is the very important thing this first
  • 00:36:13 app app selector here now what's that
  • 00:36:16 what's this first app app selector this
  • 00:36:20 is the selector the instruction angular
  • 00:36:23 queue will search for an H HTML code and
  • 00:36:26 whenever it finds this instruction this
  • 00:36:29 selector it knows okay I should render
  • 00:36:31 this component in this place now where
  • 00:36:35 does it search for it and where does it
  • 00:36:36 find it well for this route component
  • 00:36:40 which is started with the bootstrap
  • 00:36:41 command it looks in this index.html file
  • 00:36:45 and in this index.html file you see this
  • 00:36:47 line here first app app with loading
  • 00:36:50 text between the opening and closing tag
  • 00:36:53 now this clearly isn't a default HTML
  • 00:36:56 file for each HTML tag right there is no
  • 00:36:59 first app app tack in HTML nonetheless
  • 00:37:03 when loading the website we're seeing
  • 00:37:08 this does that really work and nothing
  • 00:37:11 else right we're not seeing the loading
  • 00:37:12 text now angler two knows that this
  • 00:37:16 first app app refers to this first app
  • 00:37:19 component here because we're
  • 00:37:22 bootstrapping this application and
  • 00:37:23 passing this first app app component
  • 00:37:25 that's necessary for the startup for
  • 00:37:28 application until tango – hey look for
  • 00:37:31 this first app app component in the
  • 00:37:34 index.html file and add as look for it
  • 00:37:37 and it does find it because we have this
  • 00:37:40 tacular and the stag meat matches this
  • 00:37:43 selector that being said the selector
  • 00:37:46 could be changed it works like a CSS
  • 00:37:49 selector so here we have just first app
  • 00:37:53 app and this would be similar to let's
  • 00:37:55 say h1
  • 00:37:57 now h1 would select all h1 elements and
  • 00:38:01 of course I'm not doing that here
  • 00:38:03 because I don't want to replace h1
  • 00:38:05 elements which is a default HTML tag
  • 00:38:07 with my component but I could do this so
  • 00:38:11 back to this I could also make this look
  • 00:38:15 like a attribute like an HTML attribute
  • 00:38:18 now with this this would no longer work
  • 00:38:23 with that code here as I can show you if
  • 00:38:25 I restart my server and she's Ruth and
  • 00:38:28 now if I reload my page you're seeing
  • 00:38:32 this loading text because now I go to
  • 00:38:35 will no longer replace this first app
  • 00:38:37 app select trigger because it's not
  • 00:38:39 aware that it should the selector is
  • 00:38:41 pointing to a different element for
  • 00:38:44 example the selector would now match a
  • 00:38:46 div which has first app app attached to
  • 00:38:50 it like an HTML attribute now you see
  • 00:38:55 that doesn't really work here because
  • 00:38:57 now this is matched as I replace the
  • 00:39:00 selector with an attribute selector
  • 00:39:02 again I'm just using the normal CSS
  • 00:39:05 selector noted notation here so nothing
  • 00:39:09 special I'll change it back to tag
  • 00:39:12 selection so that again I'll be able to
  • 00:39:16 swap out this first app app select
  • 00:39:18 reader
  • 00:39:24 so that's the selector very important as
  • 00:39:27 you learned next is the template URL
  • 00:39:29 which refers to this first app that
  • 00:39:32 component or HTML file which of course
  • 00:39:34 holds the HTML code which should be
  • 00:39:36 rendered whenever England you finds this
  • 00:39:39 selector here in HTML code so basically
  • 00:39:43 right now if the selector and the
  • 00:39:44 template URL
  • 00:39:45 we're telling angular to whenever you
  • 00:39:48 find this first app app selector as a
  • 00:39:50 tag as an HTML tag in the code take it
  • 00:39:54 kind of remove it and replace it with
  • 00:39:58 the HTML code you find in this template
  • 00:40:01 here though of course yet it does a bit
  • 00:40:05 more than just replacing it but this is
  • 00:40:07 how you can think of it with these
  • 00:40:09 selectors now you could also get rid of
  • 00:40:12 template URL and specify the template
  • 00:40:15 inline which means in this file if you
  • 00:40:18 want to write over multiple lines you
  • 00:40:20 would use backtick so to backticks and
  • 00:40:23 now you could well create your h1 tag
  • 00:40:27 here name it inline template to indicate
  • 00:40:30 that this is in the same file and if I
  • 00:40:32 save this you will now see the text
  • 00:40:35 inline template now I'm no longer using
  • 00:40:37 the external template here I could get
  • 00:40:39 rid of this HTML file and I will get rid
  • 00:40:42 of this testing file here too since you
  • 00:40:44 don't need it yet and I would have my
  • 00:40:47 template in this component here now the
  • 00:40:50 question is should you do that
  • 00:40:53 or should you use an external template
  • 00:40:55 it depends but on by the styling guide
  • 00:40:58 it's a good idea to use an external file
  • 00:41:02 whenever you have more than three files
  • 00:41:04 or three lines of code in your template
  • 00:41:07 so if I had this here another line that
  • 00:41:12 would still be fine that would still be
  • 00:41:14 line but with that time but I should
  • 00:41:16 think about adding an external template
  • 00:41:19 file however of course it's totally up
  • 00:41:22 to you in the end the same is true for
  • 00:41:24 the style URLs metadata here style URLs
  • 00:41:28 takes an array listing all these CSS
  • 00:41:31 files you want to use to style this
  • 00:41:34 component
  • 00:41:35 here an important thing on which I will
  • 00:41:37 come back to you is that the style will
  • 00:41:40 only be applied to this component so if
  • 00:41:44 you're styling your h1 tags in this CSS
  • 00:41:48 file not all your h1 tags of the whole
  • 00:41:51 application will get styled but only the
  • 00:41:54 ones you have in a template of this
  • 00:41:55 component that's a very important
  • 00:41:58 concept to understand and as I said I'll
  • 00:42:00 come back to that so here I'm referring
  • 00:42:02 to an external style sheet and as I said
  • 00:42:05 I could add multiple style sheets here
  • 00:42:07 but I could also get rid of URLs and
  • 00:42:10 have styles here this will still take an
  • 00:42:14 array of multiple strings and then I
  • 00:42:16 could also use back text to write a
  • 00:42:18 words but lines and give my h1 tag which
  • 00:42:23 I have here is saying inline template a
  • 00:42:25 styling off let's say a red color now if
  • 00:42:29 I save this you'll see that the color
  • 00:42:31 changes to red so that's all eyes back
  • 00:42:35 to this module ID thing here what's that
  • 00:42:37 well now that we have the template at
  • 00:42:41 the styling inline of this component and
  • 00:42:44 no longer use external files you would
  • 00:42:47 not need that however whenever you use
  • 00:42:50 external files so template HTML file or
  • 00:42:53 styling CSS files you will need this
  • 00:42:57 module ID thing here and set it up
  • 00:43:00 exactly like you see it here to allow
  • 00:43:03 angular to that once it is in production
  • 00:43:04 and compiled and may be bundled to still
  • 00:43:09 find the appropriate external references
  • 00:43:12 the appropriate external files because
  • 00:43:15 of course the files are not at the same
  • 00:43:17 that the stylet under data HTML code is
  • 00:43:21 not in the same file but in another file
  • 00:43:23 and to keep that relative reference and
  • 00:43:25 to not having to define absolute URLs
  • 00:43:30 here for template URL and so on we can
  • 00:43:33 use module ID which will basically tell
  • 00:43:35 angle to hate your external style sheets
  • 00:43:38 and template HTML files will live in the
  • 00:43:41 exact same folder as this compiled or
  • 00:43:45 minified or whatever
  • 00:43:48 here module we'll live in that's the key
  • 00:43:51 thing so this much light evening this
  • 00:43:54 much like the metadata make sure that
  • 00:43:56 the relative references to your external
  • 00:43:58 files are being kept
  • 00:44:05 so this as you can see change quite a
  • 00:44:08 bit doesn't look like the components set
  • 00:44:10 up when we created a new component we
  • 00:44:13 got rid of the external files and the
  • 00:44:15 sole works and this is how you work with
  • 00:44:17 a component you configure it in this
  • 00:44:21 metadata in this decorator as you can
  • 00:44:23 see I'm not even using this title
  • 00:44:25 anymore so I can really get rid of that
  • 00:44:26 and now I got an empty class and all of
  • 00:44:32 my logic lives inside of this metadata
  • 00:44:34 which shows you how powerful and
  • 00:44:36 important this metadata is and metadata
  • 00:44:38 you'll always need as a template because
  • 00:44:40 component in the end always needs to
  • 00:44:43 have a view which can be presented to
  • 00:44:45 the user that's the bare minimum it will
  • 00:44:47 need and which you should make sure to
  • 00:44:49 provide be it with an external file or
  • 00:44:51 inside of this component file here by
  • 00:44:55 just adding this template metadata so
  • 00:44:58 this is how you transform a default
  • 00:45:02 typescript class into an anglo to
  • 00:45:04 component how it is loaded through the
  • 00:45:07 selector here in the index.html file and
  • 00:45:09 how you set it up or configure it with
  • 00:45:12 the metadata that's all nice but in the
  • 00:45:16 next lecture we'll finally have a look
  • 00:45:18 at adding our own components
  • 00:45:26 so in order to do this I blow up up a
  • 00:45:28 new terminal and again this is our
  • 00:45:30 normal terminal here just in my IDE and
  • 00:45:32 I will use the D D ng come on again so
  • 00:45:37 I'll navigate into my project folder and
  • 00:45:40 then with ng generate I can generate a
  • 00:45:43 new piece so to say of my application
  • 00:45:48 for example component later you will
  • 00:45:49 learn about different things you can
  • 00:45:51 create you might use in your angular 2
  • 00:45:54 app so I will create a component by
  • 00:45:56 using ng generate component and then I
  • 00:45:59 give this component a name and I will
  • 00:46:01 name my let's say uber basically our
  • 00:46:05 component will be the name at the end
  • 00:46:07 ever and then hit enter now this will
  • 00:46:11 create a couple of new files and it
  • 00:46:13 looked great a new folder too as you see
  • 00:46:18 it created this other folder now in this
  • 00:46:20 folder you again find the same files you
  • 00:46:23 saw before I'll get rid of this testing
  • 00:46:25 file then I got my HTML file which just
  • 00:46:29 says I love Oryx and empty styling file
  • 00:46:32 of which I will get rid here because I
  • 00:46:33 won't need it right now
  • 00:46:34 and I will get rid of this style URLs
  • 00:46:37 and my component itself in the TS file
  • 00:46:40 this ng on anything is important right
  • 00:46:43 now you will learn about on in ed and
  • 00:46:46 lifecycle hooks what it is in the end
  • 00:46:48 later I'll also get rid of the
  • 00:46:50 constructor for now and after import
  • 00:46:54 here so now we got well pretty empty
  • 00:46:57 file as you can see the selector was
  • 00:47:00 automatically set to FA other that is
  • 00:47:02 because when creating this project I
  • 00:47:04 added the prefix flag to the angular CLI
  • 00:47:09 and set the prefix to FA which make sure
  • 00:47:13 that it prefixes all my selectors with
  • 00:47:16 this FA – thing now why is that
  • 00:47:19 important well think about the
  • 00:47:23 importance of the selector angular 2
  • 00:47:26 will replace everything that matches the
  • 00:47:29 selector with this component imagine you
  • 00:47:33 made an air mistake and were to set the
  • 00:47:37 selector to article
  • 00:47:39 article as a default HTML element and
  • 00:47:42 that probably wouldn't be that good
  • 00:47:44 let's say you don't make the mistake but
  • 00:47:46 you name the name it angular sidebar now
  • 00:47:49 that certainly is the default HTML tag
  • 00:47:51 right right but what if you were to add
  • 00:47:55 another third-party library and that
  • 00:47:59 library were to use the exact same tag
  • 00:48:02 now you would have problems again so in
  • 00:48:05 order to make sure that you're not
  • 00:48:07 interfering with default HTML tags or
  • 00:48:10 third-party libraries the solution is to
  • 00:48:15 make unique selectors and the very good
  • 00:48:18 practice to make sure that your
  • 00:48:20 selectors are unica's to pick clear
  • 00:48:24 prefixes this might be the appreciation
  • 00:48:26 of your company name the abbreviation of
  • 00:48:29 your project of your through its name if
  • 00:48:32 that makes sense whatever but pick
  • 00:48:35 something which makes this selector a
  • 00:48:38 eunuch and then follow it by the name of
  • 00:48:40 this component so other in this case
  • 00:48:42 since I named this other component so
  • 00:48:46 this is the file which was set up for me
  • 00:48:47 and now I want to use this FA other
  • 00:48:50 selector I want to use this component in
  • 00:48:52 my app component so I'll get rid of
  • 00:48:55 another line and I'll add FA ever should
  • 00:48:59 work right I'm using this other selector
  • 00:49:02 every other which is the selector setup
  • 00:49:04 here so if I save this and have a look
  • 00:49:07 at my project hmm I can't see it too
  • 00:49:11 easy it we should see our works right
  • 00:49:15 right but I don't see it the reason is
  • 00:49:19 the component first app component
  • 00:49:21 doesn't know what FA other is like the
  • 00:49:24 index.html file wouldn't know what first
  • 00:49:27 app app is if we would not tell it and
  • 00:49:30 where do we tell it in this bootstrap
  • 00:49:32 file where we telling what you start
  • 00:49:35 this application and started with first
  • 00:49:37 app app component now this will tell
  • 00:49:40 Anglo to oh okay now I'm aware of this
  • 00:49:42 first app app component so I'll have a
  • 00:49:44 look at this I see that it has to select
  • 00:49:47 your first app app and now when I go
  • 00:49:49 over this file and find first
  • 00:49:52 up here I know that this refers to this
  • 00:49:56 component now we're not doing the same
  • 00:49:59 in this first AB AB component we have FA
  • 00:50:02 other but we're know we're telling
  • 00:50:04 angular 2 that this is a component that
  • 00:50:07 it should look at a component and it
  • 00:50:09 doesn't by default scan all our
  • 00:50:11 components which is a good thing so how
  • 00:50:13 could we tell angular 2 while we're not
  • 00:50:16 doing that in the bootstrap method
  • 00:50:18 because our application is already
  • 00:50:19 running the place to tell it is inside
  • 00:50:23 this first app component here because
  • 00:50:26 here is the template where we're using
  • 00:50:27 this component now remember that I told
  • 00:50:30 you that components are directives
  • 00:50:33 instructions in the code telling anglo
  • 00:50:35 to you what to do so we're using such a
  • 00:50:37 directive in the template of this first
  • 00:50:39 app app component in order to tell
  • 00:50:43 English you that this is a directive or
  • 00:50:45 put in other words order to let angular
  • 00:50:47 to know which directives we want to use
  • 00:50:49 in this template I add another metadata
  • 00:50:52 to this components decorator the
  • 00:50:55 directives metadata which takes an array
  • 00:50:57 as a value
  • 00:50:59 now this array just has a couple of
  • 00:51:01 references to the types of directives we
  • 00:51:04 want to use in this components template
  • 00:51:07 and here of course we only want to use
  • 00:51:10 one type or one reference and this is
  • 00:51:12 the other component so I will add our
  • 00:51:15 component here now this still won't work
  • 00:51:19 and I could auto import here with my IDE
  • 00:51:22 but I'll do that by hand I'll import
  • 00:51:26 something from the upper folder now to
  • 00:51:31 something I want to import this aberrant
  • 00:51:34 component and by the way one of the
  • 00:51:37 scalp style bed rules is to have an
  • 00:51:39 empty white space before and after your
  • 00:51:42 import module names here so now this
  • 00:51:46 works and I'm importing that from other
  • 00:51:49 and not from other slash other component
  • 00:51:54 which would work too by the way now I've
  • 00:51:56 been pointing it from this other
  • 00:51:57 component file without that I'm just
  • 00:52:00 importing it from other and this will do
  • 00:52:02 well to this index stop TS file and in
  • 00:52:06 this file I'm exporting this our
  • 00:52:08 component now that might look a bit
  • 00:52:09 complicated here because why would I
  • 00:52:12 have an extra file for that
  • 00:52:13 well the reasons just if I add multiple
  • 00:52:16 components or things in general modules
  • 00:52:19 I want to export in this other folder
  • 00:52:21 I would group them all in the index dot
  • 00:52:23 ES file here a concept called barrels
  • 00:52:27 which allows me to organize my imports
  • 00:52:29 like that just indicating or referring
  • 00:52:32 to this other folder and not to the
  • 00:52:35 individual files this makes for shorter
  • 00:52:38 import statements saves code and makes
  • 00:52:41 it more readable and is a good practice
  • 00:52:43 you should follow in writing and on to
  • 00:52:45 applications the thing with the barrels
  • 00:52:47 was just decided the important thing
  • 00:52:49 here is of course that now I let and
  • 00:52:52 what you know that I'm using the average
  • 00:52:54 component as a directive in this
  • 00:52:57 template here and now angle two will be
  • 00:53:00 able to in identify this fa other
  • 00:53:02 selector therefore you see other works
  • 00:53:05 now if you reload your page or if you
  • 00:53:07 save it it is reloaded automatically so
  • 00:53:10 with this we're now using another
  • 00:53:13 component in our first component so
  • 00:53:15 we're nesting components were having
  • 00:53:18 this root component which gets started
  • 00:53:21 by the bootstrap method and which then
  • 00:53:23 holds our new component fa other or the
  • 00:53:25 other component inside of it
  • 00:53:35 you
  • 00:53:39 so that's nice but let's say we want to
  • 00:53:41 add another component and this component
  • 00:53:43 should be assembling off this F a other
  • 00:53:47 component now I could do this by
  • 00:53:51 repeating the command from before and
  • 00:53:53 let me just nameless another well I
  • 00:53:57 could hit enter and this will create a
  • 00:53:59 new folder and a beret with all the
  • 00:54:01 files you're used to
  • 00:54:02 however I don't want to do that I don't
  • 00:54:04 want to create a new folder I want to be
  • 00:54:06 this component to be in this abra folder
  • 00:54:09 so I will just navigate into this adder
  • 00:54:12 folder and inside of this art folder I
  • 00:54:15 again around ng and I could run generate
  • 00:54:18 or I just run G which is just an
  • 00:54:21 abbreviation for this and then I could
  • 00:54:23 type component or just just C which is
  • 00:54:26 also an abbreviation so mgg see that and
  • 00:54:29 that's the same as ng generate component
  • 00:54:32 test and then what I'll do next is I'll
  • 00:54:36 add the name of course another then I
  • 00:54:40 will add a flag which I'll call flat and
  • 00:54:42 this will make sure that it doesn't
  • 00:54:44 create a new folder but instead creates
  • 00:54:46 it inside of the folder you're in when
  • 00:54:49 executing this command so the other
  • 00:54:51 folder in my case here I also don't want
  • 00:54:55 to create this external HTML and CSS
  • 00:54:58 file here therefore I couldn't add the
  • 00:55:02 template or flag inline template and the
  • 00:55:08 flag inline styles I can also abbreviate
  • 00:55:14 those two flags to just write with one –
  • 00:55:17 I T at is now if I hit enter you can see
  • 00:55:23 that it created two new files and I'll
  • 00:55:27 get rid of the test file so it didn't
  • 00:55:29 create an HTML or CSS file and in this
  • 00:55:32 file here i got an inline template the
  • 00:55:36 inline style setup i won't need them
  • 00:55:38 here
  • 00:55:38 I got a selector of FA and number of
  • 00:55:41 courts of course I'll get rid of the
  • 00:55:43 other things here again I won't need
  • 00:55:45 them right now
  • 00:55:46 and that's that now if I have a look at
  • 00:55:51 the indexed ES file i'll
  • 00:55:53 need to update this to make sure that
  • 00:55:56 I'm not only exporting our component but
  • 00:55:59 also an abra component of course in this
  • 00:56:02 case from the n average component file
  • 00:56:04 make sure to not add the file endings
  • 00:56:07 here you're not having dot ts here at
  • 00:56:09 your exports you don't need that the
  • 00:56:13 same is true for the imports by the way
  • 00:56:14 so now I have this another component and
  • 00:56:18 now in the first app component I can
  • 00:56:23 just add another component and I can add
  • 00:56:29 the import here too that was this input
  • 00:56:32 grouping I was talking about I'm now
  • 00:56:34 importing all of that from the upper
  • 00:56:36 folder even though the modules are
  • 00:56:38 technically in different files and
  • 00:56:40 that's just because I am preparing this
  • 00:56:43 in this index dot ES file so now I'm
  • 00:56:46 ready to use this another component I'll
  • 00:56:50 add the selector
  • 00:56:52 HTML tag here and now you can see
  • 00:56:55 another works so this sibling component
  • 00:56:58 to the Avro component works too and now
  • 00:57:01 you also learned how to quickly generate
  • 00:57:03 new components with the abbreviations
  • 00:57:05 and how you can switch between having
  • 00:57:08 them created and subfolders or in the
  • 00:57:10 same folder with inline templates or
  • 00:57:12 inline Styles it's a really important
  • 00:57:15 thing here
  • 00:57:21 now one important thing to note is if I
  • 00:57:25 go to the other component and/or then to
  • 00:57:29 the HTML file and I replace the
  • 00:57:32 paragraph with h1 and save this you of
  • 00:57:36 course see that this is black whereas
  • 00:57:38 the h1 in the app component is red and
  • 00:57:41 that is even though I just set h1 to be
  • 00:57:45 red I did not add any other selectors
  • 00:57:47 making sure that this only applies to
  • 00:57:49 this h1 and not to the average ones I
  • 00:57:52 could say okay it's a different
  • 00:57:54 component it's clear that it doesn't get
  • 00:57:56 applied but it's not clear
  • 00:57:59 normal CSS does no components right in
  • 00:58:02 your browser
  • 00:58:03 you don't know what components you get
  • 00:58:05 one single HTML code and how does it
  • 00:58:08 work that not all the h1 elements get
  • 00:58:11 styled if we set a styling here this
  • 00:58:14 question is answered by view and
  • 00:58:16 capsulation a concept introduced or used
  • 00:58:19 by angular 2 we go back to the browser
  • 00:58:22 this is what our page looks like and now
  • 00:58:26 if you only want to stall the item
  • 00:58:29 components let's say all of that our div
  • 00:58:31 containers but we only want to start
  • 00:58:32 those diff containers we want to make
  • 00:58:35 them green how could we do that angle 2
  • 00:58:39 emulates a concept called
  • 00:58:41 the shadow Dom the shadow Dom Dom means
  • 00:58:44 that an HTML element has its separate
  • 00:58:49 Dom behind the scenes so for example
  • 00:58:53 here this article element with the h1 in
  • 00:58:56 it would have a shadow Dom behind it
  • 00:58:58 where we apply the styling like let's
  • 00:59:00 say setting the font size but our h1
  • 00:59:03 elements on the page won't be affected
  • 00:59:07 by that because they have a different
  • 00:59:08 shadow Dom behind them now the shadow
  • 00:59:11 Dom is a concept which is not supported
  • 00:59:13 for all browsers and therefore it would
  • 00:59:15 be unsafe to use that natively because
  • 00:59:18 while it wouldn't run in many browsers
  • 00:59:20 so that is not the best way but angle to
  • 00:59:23 emulates the shadow Dom which means it
  • 00:59:26 offers the same fact functionality also
  • 00:59:29 working in older browsers which of
  • 00:59:30 course is great so the emulation angle
  • 00:59:33 too adds
  • 00:59:34 looks like this we have a component
  • 00:59:36 which has its own shattered on behind
  • 00:59:39 the scenes but we are using the actual
  • 00:59:41 shadow Dom instead we're reviewing us or
  • 00:59:44 what angular 2 is doing it adds this
  • 00:59:46 critical attribute to it which of course
  • 00:59:49 isn't the default HTML attribute and
  • 00:59:52 this critical attribute as well as the
  • 00:59:56 cryptical attribute on the h1 tag allows
  • 00:59:59 angular to to identify that only
  • 01:00:02 elements with that attribute should get
  • 01:00:05 the styling defined in this component
  • 01:00:07 and of course that attribute will vary
  • 01:00:09 from component to component and with
  • 01:00:11 that angle to make sure that your
  • 01:00:13 styling is really only applied to the
  • 01:00:16 elements you want it to apply because in
  • 01:00:21 the end and all to will add your Styles
  • 01:00:23 in the Hat
  • 01:00:24 tag of the HTML document and add this
  • 01:00:27 attribute selector to it but it's best
  • 01:00:29 to see this in action so I'm in the
  • 01:00:32 browser and if I inspect this red h1 tag
  • 01:00:37 here let's increase this in size a bit
  • 01:00:44 you can see this cryptic attribute I was
  • 01:00:48 talking of right and if you have a look
  • 01:00:51 at the average one tag you don't see
  • 01:00:54 that so it's only there on the one which
  • 01:00:56 is actually relative or tag doesn't have
  • 01:00:59 it now if we have a look at the Hat of
  • 01:01:01 this document you see the style tag hero
  • 01:01:04 which was added bang or two now here we
  • 01:01:07 have the same rule we set up here h1
  • 01:01:10 should have a color of red
  • 01:01:11 but angled you added something to the
  • 01:01:14 rule it added this attribute selector
  • 01:01:17 which is a normal CSS selector making
  • 01:01:19 sure that only h1 elements with that
  • 01:01:22 attribute receive a red color and that
  • 01:01:25 attribute of course is the attribute and
  • 01:01:27 alt you added in the HTML code here q DS
  • 01:01:31 this component or all D component and
  • 01:01:34 child elements therefore elements in the
  • 01:01:37 natural component don't receive the
  • 01:01:39 styling because they don't have that
  • 01:01:40 attribute and if it would have a
  • 01:01:42 different styling there there they would
  • 01:01:44 get different attributes
  • 01:01:47 and a different styling therefore so
  • 01:01:50 this is angle choose view encapsulation
  • 01:01:52 and that things that you can turn it off
  • 01:01:54 if you don't like that you can turn it
  • 01:01:56 off you will find how to do that in a
  • 01:01:58 cheat sheet for this module but that's a
  • 01:02:01 fault and it's really really handy to
  • 01:02:03 use
  • 01:02:09 now can we use multiple components in on
  • 01:02:13 the same page or in the same template of
  • 01:02:15 course we can if I just duplicate this
  • 01:02:18 another component you see two times
  • 01:02:22 another works now all that text here is
  • 01:02:24 not really that useful so if I want to
  • 01:02:28 let's say change D another component of
  • 01:02:33 it and no longer output and number works
  • 01:02:35 but instead let's say I would have an
  • 01:02:38 article here and this article should
  • 01:02:43 have some styling it should let's say I
  • 01:02:46 have a simple border and then output
  • 01:02:48 some text between so I would of course
  • 01:02:51 add these styles metadata here to set up
  • 01:02:59 the article styling and I just add a
  • 01:03:06 little border here
  • 01:03:07 I just added a solid black border around
  • 01:03:11 this article so if I now say it is you
  • 01:03:16 see that this works however maybe I
  • 01:03:20 don't want to have a dummy test it text
  • 01:03:23 in here but I want to pass this text
  • 01:03:25 from outside now there are two methods
  • 01:03:28 to do that and one of them is data
  • 01:03:30 binding property binding which you'll
  • 01:03:32 learn about later but sometimes you have
  • 01:03:35 components which only are kind of the
  • 01:03:38 container for a ver HTML code and in
  • 01:03:43 order to allow you to pass our HTML code
  • 01:03:45 easily into your component you can do
  • 01:03:49 the following let's say I want to pass
  • 01:03:52 in another div and of course this is
  • 01:04:01 getting longest templates it would be
  • 01:04:03 better to outsource it to a next
  • 01:04:04 relational fall but I just keep it here
  • 01:04:06 to have it all in one place for demo
  • 01:04:08 purposes and then in this div I would
  • 01:04:11 have an h2 tag saying hello and then a
  • 01:04:15 paragraph saying world now if I save
  • 01:04:20 this
  • 01:04:22 I'm not seeing it here that's all broken
  • 01:04:25 its it's not outputting this what I'm
  • 01:04:27 entering between these tags and the
  • 01:04:30 reason is of course as I said angle two
  • 01:04:32 finds these tags throws it away and
  • 01:04:34 enters the content of your component
  • 01:04:38 template and that is important because
  • 01:04:40 otherwise what cells still see this
  • 01:04:42 loading dotted thing if that wouldn't be
  • 01:04:44 replaced so sometimes we don't want to
  • 01:04:47 replace it though so in this case I want
  • 01:04:50 to keep it good thing is and what you
  • 01:04:52 has a handy directive we can use for
  • 01:04:54 this and by simply adding ng content
  • 01:04:58 like this the selector this refers to a
  • 01:05:00 built-in directive angular 2 offers now
  • 01:05:03 this will render all the content being
  • 01:05:05 passed between the opening and closing
  • 01:05:07 tag inside of this component therefore
  • 01:05:10 this now works and if I add let's say
  • 01:05:13 something else for the second time I use
  • 01:05:17 this component like let's say just a
  • 01:05:19 paragraph saying something else you'll
  • 01:05:23 see that this gets rendered too and this
  • 01:05:26 is a good way how you can create
  • 01:05:28 reusable containers which take our HTML
  • 01:05:32 code and then bad dead inside of them so
  • 01:05:35 this is how you can use ng content to
  • 01:05:37 render this HTML code within our
  • 01:05:39 components now what happens if I change
  • 01:05:43 this h2 to h1 remember I'm styling h1
  • 01:05:47 for this component here as you can see
  • 01:05:51 the styling gets applied here too
  • 01:05:54 because well this is not inside is not
  • 01:05:58 defined inside this and our component
  • 01:06:00 it's defined in the first app component
  • 01:06:02 and this is the component which applies
  • 01:06:04 to styling so be aware of that that you
  • 01:06:07 style the content you pass into the
  • 01:06:09 outer component inside of the parent
  • 01:06:12 component like here
  • 01:06:18 so that's been a short introduction to
  • 01:06:22 components templates how you can use
  • 01:06:24 multiple components and how you build up
  • 01:06:26 your application of components however
  • 01:06:29 we're still outputting static text until
  • 01:06:31 now and that isn't the most important
  • 01:06:34 thing isn't or the most interesting
  • 01:06:36 thing isn't it so what be great if we
  • 01:06:38 could interact with the templates and
  • 01:06:40 output dynamic data there if we could
  • 01:06:43 let our components interact besides
  • 01:06:46 passing HTML code from parent to child
  • 01:06:48 if we could listen to events in the DOM
  • 01:06:52 for example those are all very important
  • 01:06:55 things so time to get to that so this of
  • 01:06:57 course about data binding which
  • 01:07:00 basically means interacting with data
  • 01:07:02 interaction between templates and
  • 01:07:04 business logic data binding means
  • 01:07:08 communication it means that our
  • 01:07:10 component body the logic the class DD
  • 01:07:13 typescript code interacts with the
  • 01:07:16 component template the view which the
  • 01:07:18 user sees and our component body passes
  • 01:07:21 data to this template and there are
  • 01:07:24 different ways to do this you will learn
  • 01:07:25 all of them of course and listens to
  • 01:07:28 events as I said you will learn all of
  • 01:07:31 them so which data binding methods do we
  • 01:07:33 know or do we have got string
  • 01:07:35 interpolation which has the following or
  • 01:07:38 this syntax double curly braces and then
  • 01:07:41 an expression which resolves to a string
  • 01:07:43 and you already saw that in the first
  • 01:07:46 app where we output title between curly
  • 01:07:49 braces title was referring to a property
  • 01:07:52 of this component which was a string
  • 01:07:55 therefore we were able to output it
  • 01:07:56 because as it's written here the
  • 01:07:58 expression you want to output has to
  • 01:08:01 resolve to a string in the end another
  • 01:08:04 way would be property binding and
  • 01:08:07 property binding means your binding
  • 01:08:10 which means sending data to properties
  • 01:08:14 in your Dom in your HTML code now there
  • 01:08:17 are different properties available free
  • 01:08:20 kinds to be precise now we'll come back
  • 01:08:23 to that one example would be to bind to
  • 01:08:26 the disabled property of a button
  • 01:08:28 this is a normal Dom property and then
  • 01:08:30 you need
  • 01:08:31 and notice that we don't have Kali
  • 01:08:33 braces here we just have quotation marks
  • 01:08:36 and between the quotation marks and
  • 01:08:38 expression which resolves to the type
  • 01:08:42 this property needs so for the disabled
  • 01:08:45 property here for example true or false
  • 01:08:47 but for other properties you might need
  • 01:08:50 an expression resolving to a string or
  • 01:08:52 something like that kind of the opposite
  • 01:08:55 of property binding where you send data
  • 01:08:57 to a property here for example to the
  • 01:09:00 button property would be event binding
  • 01:09:03 where you'll listen to events emitted
  • 01:09:05 from an element from something here for
  • 01:09:08 example we're listening to the bolt in
  • 01:09:10 click property or well click it went and
  • 01:09:14 this click event is available in a bath
  • 01:09:17 for example it's available on each HTML
  • 01:09:19 element and then between the quotation
  • 01:09:21 marks you have the expression you want
  • 01:09:23 to execute whenever this event occurs
  • 01:09:26 now note that expression means that you
  • 01:09:29 could also set up a method which should
  • 01:09:31 be executed here or if it's a very short
  • 01:09:34 logic you have you just defined it
  • 01:09:36 inline in this code the last thing is
  • 01:09:41 two-way data-binding and QA data binding
  • 01:09:44 of course was one of the most important
  • 01:09:47 things for angular 1 which made angle 2
  • 01:09:49 so very very successful and popular
  • 01:09:52 angular tune by default doesn't have
  • 01:09:56 two-way data-binding by default all data
  • 01:10:00 flow is unidirectional which allows it
  • 01:10:03 to let run it so fast and circumvent
  • 01:10:06 some problems nonetheless if you need to
  • 01:10:10 weigh data binding it's still there and
  • 01:10:12 the syntax is that what you see here
  • 01:10:15 square brackets then break then
  • 01:10:18 parentheses and then ng model inside of
  • 01:10:21 that and as you probably see it's the
  • 01:10:23 combination of property binding where
  • 01:10:25 you use square brackets and the went
  • 01:10:27 binding where you use parentheses and
  • 01:10:29 this of course is no coincidence but
  • 01:10:32 instead it makes sense to mix both
  • 01:10:35 syntaxes because two way binding as the
  • 01:10:38 name implies is two way it is property
  • 01:10:40 and when binding in one single thing now
  • 01:10:43 ng model is the key word
  • 01:10:45 you have to use and then between the
  • 01:10:47 quotation marks on the upper side of the
  • 01:10:49 equal sign you set up the model could be
  • 01:10:52 a single property could be a more
  • 01:10:54 complex object and a field of that
  • 01:10:56 object which you want to bind to this
  • 01:10:59 input field here for example now this
  • 01:11:02 would lead to the following behavior
  • 01:11:03 where you enter text into this HTML
  • 01:11:05 input and then the model in the code the
  • 01:11:09 component body would be updated if this
  • 01:11:12 body would be or if this object this
  • 01:11:14 pound object would be updated somewhere
  • 01:11:16 else this would also be reflected in the
  • 01:11:18 input element so it's two-way listening
  • 01:11:21 and sending it into course you will see
  • 01:11:24 all these data binding methods in action
  • 01:11:27 throughout this module
  • 01:11:33 before I come to property and event
  • 01:11:35 binding into a data binding though I
  • 01:11:37 want to have a closer look at string
  • 01:11:39 interpolation now in order through this
  • 01:11:42 I will get rid of all these components
  • 01:11:44 here and of that import as well as see
  • 01:11:50 directives metadata here and of the
  • 01:11:53 styles to let on eat them and I'll get
  • 01:11:57 rid of this outer folder because I don't
  • 01:11:59 need those components anymore instead I
  • 01:12:02 will create a new component so gee white
  • 01:12:06 space or space and then C and you
  • 01:12:09 component which I will call data binding
  • 01:12:14 this file gets generated in this data
  • 01:12:17 binding folder I'll get rid of this spec
  • 01:12:20 file of the testing file here I don't
  • 01:12:22 need that and the first thing I'll do
  • 01:12:25 here is as you can see it has a selector
  • 01:12:27 of FA data binding I'll add the selector
  • 01:12:30 here in my template FA data binding as
  • 01:12:32 you are probably aware I also need to
  • 01:12:35 add the import of my data binding
  • 01:12:41 component from data binding and I can do
  • 01:12:51 this as I also have the indexed es file
  • 01:12:53 here and then I add the directives
  • 01:12:57 metadata to set it up
  • 01:12:58 data binding component I'll just save my
  • 01:13:03 application and you see data binding
  • 01:13:06 works great so I'll also rename this to
  • 01:13:11 route component here and now in the data
  • 01:13:14 binding component I want to demonstrate
  • 01:13:17 data binding so I'll get rid of that
  • 01:13:20 stuff here for now again and next I will
  • 01:13:24 again add a property here now named is
  • 01:13:28 string interpolation and this will be a
  • 01:13:33 string this is string interpolation and
  • 01:13:37 I'll add number one called number
  • 01:13:41 interpolation let's see if that will
  • 01:13:43 work too
  • 01:13:44 and now in the template in the HTML file
  • 01:13:50 I'll output this so I will replace
  • 01:13:52 data-binding works with string
  • 01:13:57 interpolation and if I save this you see
  • 01:14:02 that we see there's a string
  • 01:14:04 interpolation this is how I output it
  • 01:14:06 that's really how simple this is this
  • 01:14:08 expression between the curly braces
  • 01:14:10 resolves to a string since well this
  • 01:14:13 property is a string and then simply
  • 01:14:16 renders it when once this component is
  • 01:14:18 loaded and rendered to the viewer to the
  • 01:14:21 user now how does this work if I use the
  • 01:14:25 number interpolation does this work
  • 01:14:29 because that is no string right number
  • 01:14:32 interpolation save this well it still
  • 01:14:37 works as you can see because a number
  • 01:14:39 can easily be cast to a string and
  • 01:14:43 typescript wearing what you've dusted
  • 01:14:45 for us so this will work to everything
  • 01:14:48 which is a string or can be cast to a
  • 01:14:50 string will work here so this is how we
  • 01:14:53 can use string interpolation
  • 01:15:00 next I want to talk about property
  • 01:15:03 binding and there are through about
  • 01:15:04 event binding so to present both where
  • 01:15:08 are they available we can bind to Dom
  • 01:15:12 properties or events so for example on
  • 01:15:15 an image the source property which is a
  • 01:15:18 native property built into well the Dom
  • 01:15:22 it's not added Bangalore to the fact
  • 01:15:25 that we can bind to it as added but
  • 01:15:27 property itself already existed the same
  • 01:15:29 is true for the collective end this is
  • 01:15:31 not add a bangle or two these are native
  • 01:15:33 properties or events already existent in
  • 01:15:37 the dawn we could also bind to directive
  • 01:15:40 properties or events these are of course
  • 01:15:43 add a banner too for example the ng
  • 01:15:45 class directive which you'll learn about
  • 01:15:49 soon which allows you to add CSS classes
  • 01:15:52 to something to an element this is a
  • 01:15:56 directive and this is a directive which
  • 01:15:58 needs an input to work correctly this
  • 01:16:01 input is sent by a via property binding
  • 01:16:04 something you will learn in this course
  • 01:16:05 of course – the same would be true for
  • 01:16:08 the ng submit event which is an event
  • 01:16:10 occurring when we submit a form handle
  • 01:16:13 bangla – also covered later in this
  • 01:16:15 course also not a built in event but
  • 01:16:18 instead one add up angular – with a
  • 01:16:20 directive now the next thing is kind of
  • 01:16:24 the same since components are directives
  • 01:16:26 but you still differentiate it here you
  • 01:16:30 can also bind to component properties so
  • 01:16:34 properties set up in the class and the
  • 01:16:36 body of your class of your component
  • 01:16:39 class can be bound or can be events can
  • 01:16:44 be met events you can listen to from
  • 01:16:46 outside so these are the free
  • 01:16:48 availabilities you have native
  • 01:16:51 properties in events direct us prop
  • 01:16:54 directive properties and events and
  • 01:16:56 component properties and events both of
  • 01:16:59 all of them being targetable with this
  • 01:17:02 property and event binding syntax for
  • 01:17:05 the latter to direct different component
  • 01:17:08 properties you may use sample than ones
  • 01:17:11 to add your custom bindings for property
  • 01:17:15 binding this is done with the add input
  • 01:17:18 metadata which you add in front of the
  • 01:17:20 property you want to make bindable from
  • 01:17:23 outside for event binding well it would
  • 01:17:27 be at output event name and then this
  • 01:17:29 would typically be an event immature
  • 01:17:32 object or an object built into angular 2
  • 01:17:35 which allows you to fire events because
  • 01:17:38 these custom events have to be triggered
  • 01:17:40 somehow and you trigger them by hand
  • 01:17:43 this would be how you work with that and
  • 01:17:46 of course you'll see this in action in a
  • 01:17:48 few minutes
  • 01:17:54 – show us action let's begin with
  • 01:17:56 property binding I'll first add another
  • 01:18:00 heading here which says string
  • 01:18:03 interpolation or sound line and then
  • 01:18:08 we'll talk about property binding here
  • 01:18:12 let's say we have an input field here
  • 01:18:15 type text is okay now I want to set a
  • 01:18:18 default value I could do this by adding
  • 01:18:20 the value attribute which is nothing to
  • 01:18:22 do with angular – this is default HTML
  • 01:18:24 code and add text if we have a look at
  • 01:18:29 this you see text here
  • 01:18:32 no angler – we have stuff happening here
  • 01:18:35 at all now I will get rid of this text
  • 01:18:40 and instead use string interpolation to
  • 01:18:43 output string interpolation I'm still
  • 01:18:47 using the default value attribute but
  • 01:18:49 the text string I'm outputting is now
  • 01:18:53 created by angular – does the string
  • 01:18:56 interpolation so this is working this is
  • 01:19:00 one way of doing this another way would
  • 01:19:01 be I use D value property binding now I
  • 01:19:05 add Colley brackets skew-t brackets
  • 01:19:08 around the value here now it's no longer
  • 01:19:12 a default HTML attribute it's instead
  • 01:19:17 referring to the Dom value property and
  • 01:19:21 I'm binding to that property by adding
  • 01:19:23 the brackets which tells a lot you wait
  • 01:19:26 a second this is no default attribute
  • 01:19:28 here we want to bind to a property – in
  • 01:19:32 this case a property called value and
  • 01:19:34 then I don't have curly braces between
  • 01:19:38 my quito's quotation marks anymore
  • 01:19:40 because I don't need it now as explained
  • 01:19:43 on this lines slides I directly add an
  • 01:19:47 expression resolving – to type this
  • 01:19:51 value or this property needs and this
  • 01:19:54 value property needs a string
  • 01:19:56 therefore I add string interpolation
  • 01:19:58 which still refers to this property set
  • 01:20:01 up in
  • 01:20:01 my component here and passes it to this
  • 01:20:06 value property therefore this look like
  • 01:20:12 nothing changed
  • 01:20:13 and indeed yields the same result as
  • 01:20:17 before where I was using string
  • 01:20:19 interpolation with quality braces and no
  • 01:20:21 brackets here but this way we're using
  • 01:20:25 property buying now what's better well
  • 01:20:28 here it's really up to you
  • 01:20:30 but oftentimes you only have one way of
  • 01:20:32 doing it or you what it's clear that you
  • 01:20:36 want to do it like this especially when
  • 01:20:37 working with custom property binding
  • 01:20:39 which I will show you in a few minutes
  • 01:20:40 so this is how you bind to properties of
  • 01:20:45 HTML elements here but it would also be
  • 01:20:48 interesting to see how you can bind to
  • 01:20:50 directive properties right because I was
  • 01:20:53 talking about that too so I will add
  • 01:20:55 another element a normal HTML element
  • 01:20:59 here let's say I want to have the
  • 01:21:03 paragraph element here and the gift of
  • 01:21:09 the text of is this styled and now if it
  • 01:21:13 save this it's of course not really
  • 01:21:15 styled it's just text right so in order
  • 01:21:19 to style this I can give that a built-in
  • 01:21:24 directive anglers who ships with the ng
  • 01:21:26 class directive now if I attach it like
  • 01:21:30 that this won't work
  • 01:21:32 this expects property binding so I add
  • 01:21:36 brackets and then this directive here
  • 01:21:40 this property expects to get a
  • 01:21:43 JavaScript object so I create one with
  • 01:21:46 single curly braces this is nothing to
  • 01:21:48 do with string interpolation here this
  • 01:21:50 is just a JavaScript object because
  • 01:21:52 between the quotation marks off property
  • 01:21:54 binding remember that you write a normal
  • 01:21:57 JavaScript expressions there are some
  • 01:22:00 special things like you can't use the
  • 01:22:03 new keyword there but in general it's
  • 01:22:06 JavaScript code just make sure not to
  • 01:22:09 write multi-line code that won't work
  • 01:22:12 but as long as you stay in one line you
  • 01:22:15 can write your javascript code so I'm
  • 01:22:16 creating a JavaScript object here and
  • 01:22:19 for this object for this directive here
  • 01:22:21 the key is the name of the class I want
  • 01:22:23 to attach so let's say red border and
  • 01:22:27 then true or false if I do want to
  • 01:22:30 attach it now if I saved us you won't
  • 01:22:33 see anything so I'll first define this
  • 01:22:35 class in this CSS file and gift us well
  • 01:22:41 color border giving off 1 pixels solid
  • 01:22:47 red and of course here I have to select
  • 01:22:51 the class red border so now if I save
  • 01:22:57 this file here you can see that we get
  • 01:23:01 this red border because if I inspect
  • 01:23:04 this element here you can see it has
  • 01:23:08 this class red border attached to it if
  • 01:23:11 I go over to my HTML file and set this
  • 01:23:15 to false and save you no longer see the
  • 01:23:21 red border because it no longer has this
  • 01:23:23 class attached to it and of course you
  • 01:23:26 can not only hard code this like I'm
  • 01:23:28 doing this here in this template but you
  • 01:23:30 can also do this dynamically this false
  • 01:23:35 might be the result of let's say a
  • 01:23:38 method call on tests and then in the
  • 01:23:42 data binding component it would have
  • 01:23:44 this method on tests which might return
  • 01:23:48 true save this and you get the red
  • 01:23:53 border again because this returns true
  • 01:23:55 and this is the expression executed here
  • 01:23:59 and this of course is a way to allow you
  • 01:24:01 to write multi-line code again so as you
  • 01:24:03 can see normal JavaScript code here for
  • 01:24:06 example a method execution in the end
  • 01:24:09 resulting in an object this property
  • 01:24:12 needs a JavaScript object with a key of
  • 01:24:14 the class name and then true or false
  • 01:24:16 and therefore applying the styling now
  • 01:24:20 besides ng class we also have ng style
  • 01:24:25 which has as a key the style name so
  • 01:24:28 let's say color for the text color and
  • 01:24:30 then as a value a string defining the
  • 01:24:33 style so let's make that green now you
  • 01:24:39 can see that this is green text because
  • 01:24:43 what I said is a private way to write
  • 01:24:45 this I could also make it blue of course
  • 01:24:48 so it works pretty similar
  • 01:24:51 again using property binding here to
  • 01:24:53 make sure that we're passing the data
  • 01:24:56 this directive needs as this directive
  • 01:25:00 has a property bound to the outside to
  • 01:25:02 work correctly and this will certainly
  • 01:25:06 become 100 percent clear once we start
  • 01:25:08 writing our own property bindings which
  • 01:25:11 we'll do in the next video
  • 01:25:19 as explained it's of course nice to bind
  • 01:25:22 to already existing properties but it
  • 01:25:25 really gets clear once you write your
  • 01:25:27 own bindings so I will create a new
  • 01:25:30 component for this and I'll navigate
  • 01:25:33 into the data binding folder because I
  • 01:25:36 want to create it there then I use ng C
  • 01:25:40 for create or G for generate C full
  • 01:25:43 component and then I will main a named
  • 01:25:47 it property binding with a – make it
  • 01:25:51 flat so that it stays in the same folder
  • 01:25:53 and also I want to have inline template
  • 01:25:57 and inline Styles so this creates two
  • 01:26:01 new files I'll get rid of the test file
  • 01:26:04 and here is my property binding
  • 01:26:07 component now let's say I don't want
  • 01:26:10 your output property binding works here
  • 01:26:12 but instead what I went to output here
  • 01:26:15 is a value I get passed in from outside
  • 01:26:20 now I could do this using ng content
  • 01:26:23 like you learned before but here's never
  • 01:26:25 technique and of course you cannot only
  • 01:26:28 pass content you want to output but
  • 01:26:30 content you want to use anywhere in your
  • 01:26:32 application as you might be aware so
  • 01:26:34 here I will first get rid of this stuff
  • 01:26:38 here again and then I want to output
  • 01:26:43 with string interpolation a property
  • 01:26:45 named result which I will define here
  • 01:26:48 and result should be a number it's let's
  • 01:26:53 say zero at the beginning now I want you
  • 01:26:58 set result from outside though so I will
  • 01:27:02 add add input metadata and import input
  • 01:27:09 from in Lahore and this will make this
  • 01:27:13 resolve property bindable from outside
  • 01:27:18 so now I will go to the data binding
  • 01:27:21 component or to the HTML code property
  • 01:27:24 binding and I will add number headline
  • 01:27:28 here call it custom property binding
  • 01:27:32 now below discussed improper keybinding
  • 01:27:34 I will add F a property by name which is
  • 01:27:39 the selector of this property binding
  • 01:27:42 component and notice how the English CLI
  • 01:27:45 automatically transformed property –
  • 01:27:47 binding into property binding camelcase
  • 01:27:52 class name so I'm importing this of
  • 01:27:55 course now also adding the directives
  • 01:27:59 metadata and a property binding
  • 01:28:07 component which has to be imported of
  • 01:28:12 course and also get rid of one in it
  • 01:28:13 here so import property binding
  • 01:28:22 component from the property binding
  • 01:28:29 component here and now you see that zero
  • 01:28:35 hero of course because it is set to zero
  • 01:28:38 initially right we set this here however
  • 01:28:41 by adding add input this property can be
  • 01:28:45 bound from outside of this component so
  • 01:28:47 I can go to my data binding component
  • 01:28:49 into the HTML template and add something
  • 01:28:53 to that selector I'll add brackets
  • 01:28:56 because we're talking about property
  • 01:28:58 binding and this is the syntax which
  • 01:29:00 tells unless you that property binding
  • 01:29:03 is in place and then result list of the
  • 01:29:07 name of the property I want to bind to
  • 01:29:08 I'll set results to 10 and now if this
  • 01:29:13 reloads you see that we get 10 year
  • 01:29:16 because we're now binding to the
  • 01:29:17 property from outside we're passing the
  • 01:29:20 data which should be shown there from
  • 01:29:23 outside in to that component
  • 01:29:30 so you'll require a lot about property
  • 01:29:33 binding time to move on to the next step
  • 01:29:35 event binding I will trade in you
  • 01:29:39 component and as you might have already
  • 01:29:43 guessed I will not name it property
  • 01:29:45 binding but event binding otherwise I
  • 01:29:47 created the same way I did before get
  • 01:29:51 rid of the starts back tour ts file and
  • 01:29:53 then this event binding component all
  • 01:29:55 again get rid of all the things I won't
  • 01:29:59 need here for now okay and I will add a
  • 01:30:05 button here which says click me if I
  • 01:30:12 click this button nothing would happen
  • 01:30:13 right now what I can do though is I can
  • 01:30:17 add a click listener to that button and
  • 01:30:20 on clicking I will execute EE on clicked
  • 01:30:24 method now be aware I could also execute
  • 01:30:29 some code right away here I don't have
  • 01:30:31 to execute a method you may execute any
  • 01:30:33 channel strip code here however I opted
  • 01:30:36 for the on click method created in the
  • 01:30:38 body here therefore and I will just open
  • 01:30:41 alert telling me it worked now in order
  • 01:30:47 to really see anything I of course have
  • 01:30:50 to implement this component therefore I
  • 01:30:53 will add the import here so this will be
  • 01:30:58 from the event binding component also
  • 01:31:04 added in the directives array here and
  • 01:31:07 then in the HTML file I'll add a new
  • 01:31:14 horizontal line and a new heading saying
  • 01:31:17 event binding and below that I'll have
  • 01:31:20 my event binding component click be
  • 01:31:28 works so here I'm binding to a default
  • 01:31:33 Dom event to event supplied by this HTML
  • 01:31:37 element or by all HTML elements by the
  • 01:31:40 Dom clicking on
  • 01:31:42 element is something which is natively
  • 01:31:44 built-in like would be mouse over Mouse
  • 01:31:47 leave and so on so this was this native
  • 01:31:51 event but in the next lecture I'll have
  • 01:31:54 a look at building my own event and of
  • 01:31:57 course also how to listen to that
  • 01:32:04 so while it's nice to listen to built-in
  • 01:32:08 events and you often do that oftentimes
  • 01:32:11 you'll also need your own events and I
  • 01:32:14 will show you how to build such a custom
  • 01:32:16 event and use it with event binding in
  • 01:32:19 this lecture so I'll go back to the
  • 01:32:22 event binding component and I'll add a
  • 01:32:24 new property which I will name click and
  • 01:32:29 this will be a new event emitter object
  • 01:32:34 now event emitter is something I have to
  • 01:32:37 import here from angular 2 core and this
  • 01:32:42 allows me to emit events and to listen
  • 01:32:44 to it like the name implies so what I
  • 01:32:48 want to do now is here when I'm clicking
  • 01:32:50 on it I'm actually using my clicked
  • 01:32:53 u-bend here my clicked property and I
  • 01:32:56 call the emit method and I will emit
  • 01:33:01 some text it works therefore this is a
  • 01:33:05 generic type I like this of type string
  • 01:33:08 it will work without that too and if
  • 01:33:10 you're not aware what generic types is
  • 01:33:12 don't worry about this basically this
  • 01:33:14 means event emitter is an object which
  • 01:33:17 it cannot wrap itself around several
  • 01:33:21 other types so you may omit and you went
  • 01:33:24 with data of type string like we're
  • 01:33:26 doing it here or you may omit and it
  • 01:33:28 went with type of being well a complex
  • 01:33:30 JavaScript object so it doesn't care
  • 01:33:33 which type of data it emits and
  • 01:33:34 therefore its generic and here we're
  • 01:33:36 using string that's all I'm saying here
  • 01:33:38 so now I'm a bit omitting this event as
  • 01:33:42 a next step it would be creative someone
  • 01:33:43 was listening
  • 01:33:44 I'll make this listenable outside of
  • 01:33:48 this component here I could listen to it
  • 01:33:50 inside of this component right now but
  • 01:33:52 to make it available outside I'll add
  • 01:33:54 the output metadata or decorator here I
  • 01:33:59 also have to import this here output
  • 01:34:04 with this this is now listenable outside
  • 01:34:08 of this component so I will go to my
  • 01:34:10 data binding component HTML file and
  • 01:34:13 I'll also add something to this selector
  • 01:34:16 here too
  • 01:34:16 Tagg like i before did with the result
  • 01:34:19 property binding here I'll do the same
  • 01:34:22 year for the event and I named this
  • 01:34:24 clicked because this is the property
  • 01:34:26 name I used in the well class here so
  • 01:34:32 clicked of course is no built in no
  • 01:34:34 native event this is my custom event and
  • 01:34:37 then like for native events I specify
  • 01:34:40 what should have more and this event
  • 01:34:41 appears when I want to execute us I will
  • 01:34:45 execute you on click method and I want
  • 01:34:48 to pass data I'm omitting here remember
  • 01:34:51 I'm meeting a string and I can extract
  • 01:34:55 the data with dollar sign event object
  • 01:34:58 or name here and this is protected you
  • 01:35:02 can't override this this is the object
  • 01:35:05 and what you will store the data passed
  • 01:35:08 through a wind freely went inside off so
  • 01:35:12 dollar sign event is your way to extract
  • 01:35:14 data you pass with any wind so I'll
  • 01:35:17 execute on clicked and I pass this you
  • 01:35:19 enter data so in the data binding
  • 01:35:22 component all therefore add this on
  • 01:35:25 clicked method and I know that I will
  • 01:35:29 get a value of type string because
  • 01:35:31 that's what I'm ever emitting and I can
  • 01:35:33 then simply output this in an alert so
  • 01:35:37 if I save this
  • 01:35:38 let us page load click me you see the in
  • 01:35:43 it works text and this is how you can
  • 01:35:45 set up your own custom events and listen
  • 01:35:50 to them in a parent component to that
  • 01:35:52 and this of course is a great way to let
  • 01:35:55 components communicate
  • 01:36:01 for both input and outputs of property
  • 01:36:06 and event binding there are some
  • 01:36:08 additions to the syntax you already
  • 01:36:10 learned for event binding the ad output
  • 01:36:14 here can take an argument of type string
  • 01:36:18 where you might specify a different name
  • 01:36:22 which can be used outside of this
  • 01:36:24 component so internal this property's
  • 01:36:27 name clicked but let's say outside of
  • 01:36:30 this so in the component listening to
  • 01:36:33 the event you want named is clickable
  • 01:36:38 for example then you could go to the
  • 01:36:41 data binding component or to the HTML
  • 01:36:43 file to the template where I am
  • 01:36:45 listening
  • 01:36:45 and now clicked would no longer work as
  • 01:36:48 I can demonstrate you nothing happens
  • 01:36:51 because we rename renamed it to
  • 01:36:53 clickable which is now the outside name
  • 01:36:56 of this property so now this works again
  • 01:36:58 this is a way to have differing names
  • 01:37:02 inside of the target component or of the
  • 01:37:05 component with the input or output and
  • 01:37:07 the external the other components
  • 01:37:10 however it is a best practice to not
  • 01:37:13 really use that if you don't have to so
  • 01:37:16 you may just leave it like this and use
  • 01:37:18 the internal property name as the
  • 01:37:21 external one – the same you just
  • 01:37:23 software output does of course all the
  • 01:37:25 work for input another thing which you
  • 01:37:28 also shouldn't necessarily use is that
  • 01:37:31 instead of having at input in front of
  • 01:37:34 each property you want to have as an
  • 01:37:36 input and the same is true for at output
  • 01:37:39 of course you could add the inputs
  • 01:37:42 metadata or outputs in the case of event
  • 01:37:45 binding and then in an array half as
  • 01:37:48 strings all the different names or
  • 01:37:53 property names you want to use so for
  • 01:37:56 example you might want to use result
  • 01:37:59 here and this would allow you to get rid
  • 01:38:02 of the add input now this would still be
  • 01:38:05 set as a input but you don't have the
  • 01:38:07 decorator here and of course you also
  • 01:38:08 don't have to import it from here then
  • 01:38:12 should be inputs here by the way as you
  • 01:38:14 can already see I'm getting this
  • 01:38:16 underlined and I get an error by Tia
  • 01:38:18 Slynt telling me that this is a bad
  • 01:38:20 practice and I should use ad input the
  • 01:38:22 same would be true for outputs so while
  • 01:38:25 you might do this and you can it's a
  • 01:38:28 better practice to well revert this and
  • 01:38:31 use the at input decorators your like
  • 01:38:34 before so that you learned how you can
  • 01:38:36 let your components communicate with
  • 01:38:39 each other transfer data listen to
  • 01:38:41 events and so on of course there are
  • 01:38:43 other ways to you will learn about them
  • 01:38:46 and the services module but this is a
  • 01:38:48 very powerful and important thing and
  • 01:38:50 property and event binding as well as
  • 01:38:53 string interpolation are things you will
  • 01:38:55 use a lot really a lot
  • 01:39:04 how to come to the last way of data
  • 01:39:06 binding two-way data-binding be aware
  • 01:39:09 that as i already explained it's not a
  • 01:39:11 default in hangout you and it isn't for
  • 01:39:14 a reason because it is slow and it has
  • 01:39:17 some problems nonetheless if you want to
  • 01:39:20 use it and you'll learn that off times
  • 01:39:22 you're fine without using it but if you
  • 01:39:25 want you this is how you do it I will
  • 01:39:28 create a new component and I will name
  • 01:39:31 it two-way binding again will be flat
  • 01:39:38 with inline template and styling I'll
  • 01:39:40 get rid of the test file and inside of
  • 01:39:42 this I'll train you input some normal
  • 01:39:44 HTML element get rid of this starting
  • 01:39:47 text here don't need two styles don't
  • 01:39:50 need on another zero of course so get
  • 01:39:52 rid of all of that you'll learn what
  • 01:39:55 that on anything means soon and with
  • 01:39:59 this I want you bind what I enter here
  • 01:40:02 with two-way binding so I will create an
  • 01:40:05 object here let's name it person and
  • 01:40:10 person should simply be a JavaScript
  • 01:40:12 object
  • 01:40:13 I'll use the literal notation here which
  • 01:40:19 will have a name let's say max but equal
  • 01:40:23 to my name and an age so 27 in my case
  • 01:40:27 so this is the person and I want to bind
  • 01:40:30 this input here to the person's name I
  • 01:40:33 use brackets and parentheses add between
  • 01:40:38 ng model to indicate that I want to bind
  • 01:40:41 to a model that I want to use two-way
  • 01:40:42 data-binding
  • 01:40:43 and then between quotation marks just
  • 01:40:46 the model to which I want to bind so
  • 01:40:48 here to the person and then to the name
  • 01:40:51 so dot notation here to access this
  • 01:40:53 field this already set up to a data
  • 01:40:57 binding and to demonstrate this I will
  • 01:40:59 duplicate this simply and now if I
  • 01:41:03 implement this by adding the import
  • 01:41:07 two-way binding component what's the
  • 01:41:12 name
  • 01:41:13 to a binding components right like this
  • 01:41:19 did I miss type here two-way binding
  • 01:41:21 component here so now adhere to the
  • 01:41:25 metadata to the directives metadata and
  • 01:41:27 that of course as before clips or I lay
  • 01:41:38 it at two-way binding save this let it
  • 01:41:44 reload and here you see the to import
  • 01:41:48 fields at the bottom now that might be a
  • 01:41:51 bit hard to see though let me quickly do
  • 01:41:55 some cheap hack in here add a couple of
  • 01:41:58 empty lines just to bring it up a little
  • 01:42:00 bit so these are the two fields in F I
  • 01:42:04 change that one of them see that it
  • 01:42:07 changes in both of them and this is
  • 01:42:11 really all that is to it it's two-way
  • 01:42:14 data-binding both fields are bind in two
  • 01:42:17 directions which means if I change it in
  • 01:42:19 one field in a sent to this property and
  • 01:42:22 update there and if I update this
  • 01:42:25 property from somewhere else like from
  • 01:42:27 the other input field or the other input
  • 01:42:29 element it's also reflected on the first
  • 01:42:32 one
  • 01:42:32 because again it's two-way data flowing
  • 01:42:34 out of it and into it so where with
  • 01:42:38 property binding we only sent data into
  • 01:42:40 something and with you went binding we
  • 01:42:43 get data out of something here both
  • 01:42:46 directions are active which again is
  • 01:42:48 two-way data binding
  • 01:42:57 you