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

You may also like