- 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