Angular 2 Tutorial for Beginners: Learn Angular 2 from Scratch | Mosh

hi my name is Muhammad Ali and I'm going to be instructor in this course let me quickly explain in three minutes what angular is what you can do with it and what you're going to learn in this course angular is a leading framework for building JavaScript heavy applications and often is used in building single page apps or spas what is a single page app well in a standard web application when we click on a link the entire page is reloaded in a single page app instead of reloading the entire page replace the view that is in the content area with another view you also keep track of history so if the user navigates using back and forward buttons we restore the application in the right State as you might guess these applications provide a very fast and fluid experience Gmail is a very good example of a single page application so anytime you want to build an application that has a lot of JavaScript like single page applications done necessarily you may want to look at angular to build this application in a modular maintainable and testable way sure there's lots of other frameworks out there that have the same promises so why angular well angular is one of the leading frameworks in this space it's been around for quite a few years it's just been rewritten with the best practices for the future it has a huge community support it's backed by Google it's not going away anytime soon and as google trends shows the demand for angular developers is increasing constantly so in this course I'll be teaching you angular 2 from scratch in a step-by-step fashion whether you are familiar with angular 1 we're not doesn't really matter because angular 2 is an entirely new framework and by the way we'll be using typescript why not JavaScript well typescript is a superset of JavaScript any valid JavaScript code is valid typescript which means you don't have to learn a new programming language types great bring some useful features that are missing in the current version of JavaScript supported by most browsers we get modules classes interfaces access modifiers like public private intelligence and compile time checking so we can catch a lot of programming errors during compile time if you have never worked with typescript I can guarantee you're going to absolutely love it okay now you probably want to say Marsh tell me what I'll be able to do by the end of watching this course well it's easier to show you by the end of watching this course you're going to build a real-world application like this so we have a list of users coming from a RESTful API with crud operations we can add a new user here we have a form with custom validation and dirty tracking so if I fill out one or two fields and accidentally try to navigate away the application will warn me we also have a list of posts we have pagination which is done on the client and filtering which is done on the server you also have master detail so as we click on a post we can see it's details loaded dynamically from the server these are the patterns that you see in a lot of real-world applications and in this course you're going to learn how to implement these patterns with angular 2 you in the nutshell we have four key players in an angular 2 app components directives routers and services let's take a look at each of these building blocks in more detail at the very core we have components a component encapsulate the template data and the behavior of a view so it's more accurate to call it a view component every angular 2 app has at least one component which we call the route component but in the real world an application often consists of tens or hundreds of components for example imagine we want to build an application like udemy we can divide this page into three components navigation bar sidebar and courses so each component has the template or HTML markup for the view as well as data and logic behind that view components can also contain other components so in the list of courses we can have multiple course components and in each course component we can have another component for rating that course the benefit of this architectural style is that it will help us break up a large application with various complex views into smaller more manageable components or as I said view components plus we can reuse these components in different parts of an application or even in a different application for example we can reuse this rating component here in a totally different application now you might be saying look much I understand what you're saying about components but what are these components really like in the code a component is nothing but a plain typescript class so just like classes in other programming languages it can have properties and methods these properties hold the data for the view and the methods implement the behavior of the view like what should happen when we click a button now if you have never worked with angular before one thing that may be new to you is that these components are completely decoupled from the document object model or dumb in applications written with plain JavaScript or jQuery we get a reference to a Dom element in order to modify it or handle its events in angular we don't do that instead we use binding so in the view we bind to the properties and methods of our component if there is a change in the value of a property the Dom element bound to this property will refresh automatically so we can't and shouldn't get a reference to that Dom element in order to update it similarly to handle an event raised from a Dom element like click we bind that event to a method in our component when the user clicks that element the corresponding method in our component will be called now in case you're curious why these components are decoupled from the Dom the reason is that this makes our components unit testable if you have a plain class that is nothing but a bunch of properties and methods we can easily unit test it without having a document object model now sometimes our components need to talk to back-end API s to get or save data to have good separation of concerns in our applications we delegate any logic that is not related to view to a service so a service is just a plain class that encapsulate any non user interface logic like making HTTP calls logging business rules and so on we have another key player in angular apps and that's a router which is purely responsible for navigation so as the user navigates from one page to another it will figure out based on changes in URL what component to present to the user you will learn more about this in the section titled building single page apps and the last key player in angular is a directive similar to components we use directives to work with the Dom but a directive unlike a component doesn't have the template or HTML markup review we often use them to add behavior to existing Dom elements for example we can use a directive make it text box automatically grow when it receives focus angular has a bunch of built in directives for common tasks like adding or removing Dom elements adding classes or styles to them repeating them but we can also create our own custom directives so this is the big picture as you go through this course you will see each of these building blocks in action you okay let's jump in and set up our development environment first in case you don't have node on your machine download it from node.js org and install it on your machine it's pretty easy and straightforward to install we'd note we get a tool called NPM or node package manager which we use for managing dependencies of our application so once you install node open up command prompt on windows or terminal on Mac and type NPM install - J typescript if you're a Mac user you need to put sudo in the front with this we install typescript globally on our machine the next thing you need is a code editor that supports typescript in this course I'll be using vs code which is a beautiful lightweight and cross-platform editor from Microsoft you can use sublime Adam IntelliJ Visual Studio and any other editors that support typescript and finally I'll be using Chrome as my browser you can use any browsers but I would highly recommend to use Chrome because we'll be working with Chrome developer tools throughout the course and I want to make sure you have the exact same experience as me during the videos the proper way to create an angular app is to use angular command-line interface or CLI but this tool is not ready yet so for the time being I've created a seed project that I've put together based on the guidelines on angular website we'll be using this seed project throughout the course so download the attached zip file and put it somewhere on your machine now let me show you what you will find inside this zip file so this is vs code editor that I'll be using throughout the course look inside this folder you will find a few configuration files an index dot HTML and an app folder which is the container for our application inside this app folder we got a couple of typescript files one is boot which is the main or starting module of our application and the other is app that component the TS which is the root component of our application we look at these files in more details in the next section this TS config that JSON is the configuration file for typescript compiler so it uses this configuration to determine how to compile or more accurately transpile our typescript files into javascript for example you can see that the target javascript is es5 which is the current version of javascript if you want to understand any of these settings in more detail it's best to look at TS config documentation and github typings like json is another configuration file for typescript when using external javascript libraries in time script we need to import what we call a typescript definition file this type definition file gives us static type checking and intellisense for that javascript library and this is where we reference that typescript definition file you'll learn more about this later in the course now this package that JSON is a standard node package configuration so here you see the name of our application and it's version under scripts we got a few some note commands which we'll look at shortly then we got the dependences for our application so we can see we've got dependency to angular to system J s and so on I'm going to move on because I would order to fast-track to running our first angular app but if you're the kind of developer who prefers to understand the details first I've attached a PDF with the details of these dependencies okay now we need to install these dependencies so open up command prompt on Windows or terminal on Mac and go to the folder where you extracted this zip file and then run NPM install NPM we'll look at our package that JSON file and download our dependencies from NPM registry just be aware that this is going to take several minutes for the first time so be patient once these dependencies are installed you will see a new folder here called node modules so all our dependencies and their dependencies will be stored here now let's have one more look at package that JSON look under the script section here we have a few custom node commands the one we'll be using a lot is start which is the shortcut for concurrently running two commands running typescript compiler in the watch mode and starting our Lite web server with typescript compiler running in the watch mode we can modify and save a typescript file and then the typescript compiler will automatically generate a JavaScript and JavaScript map file in the same folder this javascript file is eventually the one that will be loaded in the browser but we never have to view or modify it we code purely in typescript so back in the terminal type NPM start so now our typescript compiler is running in the watch mode and our Lite web server is started this also launches our default browser which on my machine is Safari so I have to manually open up Chrome and navigate to localhost port 3000 and this is our first angular app up and running okay now let me show you something look at this app folder next to each type script file we have two files that are generated by typescript compiler one is a JavaScript file and the other is a JavaScript map file which is used during debugging so if something goes wrong and we try to debug in the browser this map file will take us to the corresponding line in your type script file now let's open up this app component the TS and make a small change so i'm going to explain this very briefly but in the next section we'll have a closer look at this scene text and you will create a component from scratch so you will know exactly how everything works so basically our root component is nothing but a plain type script class it's just decorated with this component decorator this decorator or annotation add metadata about this class so all the building blocks of angular 2 apps that I talked about are essentially playing type script classes that are decorated with some decorator so here in the template we have a heading let's change this to hello angular now before saving the changes let me bring up my terminal here notice that when I save changes because typescript compiler is running in the watch mode it will detect that this file has changed and it will regenerate the corresponding JavaScript and JavaScript map files then I'm going to switch back to Chrome and you will see that it will get refreshed automatically so we don't have to press f5 to refresh the page every time our application code changes this is browser sync which is a node module that are Lite web server uses okay now I'm going to go ahead and save the file look at the terminal typescript compiler we generated our JavaScript file now let's switch over to Chrome so Chrome automatically refreshed so this is going to be our development experience throughout this course we write typescript code and typescript compiler automatically generates JavaScript files for us it's simple and easy but if you want to build a production application you may want to include typescript compile a ssin as part of your build process so if you're using a build automation tool like gulp or grunt typescript compiler ssin would be another step in your build process that's beyond the scope of this course or at least we shouldn't worry about this complex that is at this point and just focus on building angular 2 apps just be aware that with this workflow sometimes it may take a couple of seconds until typescript compiler detects your changes also I've noticed that this Lite web server has a bug and sometimes it terminates unexpectedly so if you're not seeing your changes have a look at the terminal and see if flight server has terminated if so just terminate the session with ctrl + C and then run NPM start again ok let me quickly give you a heads up about what you're going to see over the upcoming sections in the next section titled angular to jump start we're going to create a component a service and a directive from scratch so by the end of the next section you will have an idea of what it is like to build an angular 2 app you will see the big picture in the code from that point in every section we'll explore one concept at a time you'll learn about property and event binding building reusable components controlling rendering of HTML building forms using reactive extensions and observables calling back-end services building single page apps and finally over the last two sections you'll put everything together and build a real-world application just to let you know in this course I'm not going to touch on angular 1 and how it's different from angular 2 and there is a reason for that not every student taking this course is familiar with angular 1 so I don't want to distract this group of people with the old way of doing things which has no place in the future if you have an application written in angular one your best source for upgrading that is angular website they have fully documented the process and various strategies you can run angular one and two side by side and upgrade one module at a time with all that let's get started for the next section well hello my name is marsh thanks for watching my youtube channel this video you've been watching so far is actually part of my angular course on udemy if you're interested to have the complete six-and-a-half hour course you can get it with a discount using the link in the video description and if not that's perfectly fine continue watching as the second section is coming up I hope you enjoy and have a great day so in the introductory section you learned about the core building blocks of angular 2 apps components directives services and routers in this section we'll implement a component a directive and a service from scratch so by the end of this section you'll have an idea of what it is like to build an angular 2 app will look at routers later in the section called building single page applications so let's get started all right so I've got the project open envious code I also got the terminal writing here so our lightweight web server is in the background plus our typescript compiler is in the watch mode it's looking for changes and when it observes a change in a file it will transpile it into JavaScript and then the browser sync will kick in and automatically refresh the browser you're going to see this in a second so back to vs code in angular 2 each of the building blocks I talked about like components directives and routers are plane type script classes and that's one thing that I love about angular 2 the API is much simpler and cleaner so I'm going to start by creating a class so right-click app new file I'm going to call it courses dot component dot TS note the naming convention so we start with the name of the component like courses then dot component then TS okay so to create a class we start by export class courses component what is this export here in typescript each file is considered a module in each module we often export one or more things like a class a function or a variable in this case I'm exporting course this component class so it will be available to other modules in my application later when I need this class I can import it as you will see shortly alright so we have a class now how does angular know that this class is going to be a component it looks for specific attributes or metadata on your classes for example to make this a component we need to apply the component decorator to this class a decorator in typescript is like an attribute in c-sharp or an annotation in java many other languages have similar concepts so first I need to import the component decorator from the core angular module import curly braces component from here is a string that specifies the name of the module angular 2 slash core so in angular 2 slash core module we have a decorator called component and here I'm importing it so if you look at the source code for that module you will see that they have exported this component there so we can import it here that's the idea now these decorators are functions so we need to call them at sign component all decorators need to be prefixed with an ADD sign I know this is a function we just call it like this look at the intellisense it's telling me that this function takes an object so here's my object and you can see the list of attributes that we can add in this object in this video we're going to look at two basic attributes one is selector which is a string as you can see in the intellisense I'm going to call it courses so this selector field here specifies a CSS selector for a host HTML element when angular sees an element that matches this CSS selector it will create an instance of our component in the host element so here I'm assuming the host element is an element with the tag courses the next attribute is template and this template specifies the HTML that will be inserted into the Dom when the components view is rendered we can either write the template here inline or put it in a separate file I'll get to that later in this section about components so let's just display something very simple courses so that's all we have built our first component as easy as that now we need to add this courses element here somewhere so first save this file and then go to app that component es if you're using vs code or sublime text you can press ctrl P on Windows or command + P on Mac and here you can type the name of the file in your project so app component dot TS if you're using a different editor and you don't have this shortcut just go to the app folder and you will see app dot component the TS there alright look at this component it looks familiar doesn't it so first we are importing the component decorator from angular here we're calling it so it's a function that takes an object and this object we have two fields selector and a template just like our other component and finally we've got export class app component so this app component is the root of your application it's a view component that takes control of the entire app or the entire page and here's a template for this view component I'm going to change this and add courses element here now if I run the application now you're not going to see the courses component why because angular sees this course is tagged but it doesn't know which component is responsible for that even though we defined a component in our application nowhere we have referenced it so angular does not scan all your files to discover your components it will only recognize the components that you have explicitly referenced so here we need to add a reference to course this component so it can be discovered by angular so we supply a new field here called directives which is an array inside this array we specify any directives or components we have used inside the template for this component just to refresh your memory we use directives to extend or control document object model we can define custom attributes or custom elements that are not part of standard HTML in this case we used our courses component to define a new element so every component is technically a directive the difference is that a component has a template and a directive dozen so back to app we need to reference our component here courses component the read online cannot find name courses component and that's what I love about typescript compile time checking so we need to import this courses component import curly-braces courses component from what is the name of our module for the custom modules that we define we need to specify their path in the file system so this file app that component the TS is in the folder app look app folder and here's app that component TS and here is our courses component so they're both in the same folder so back in app that component of TS here i type dot slash which means start searching from the current folder and then the name of the module so courses dot component without TS extension save now let's look at our terminal ok typescript compiler detected a change so it transpiled our TS files into javascript files and now if you go to Chrome look our courses component is successfully rendered on the page let's inspect the elements so in the HTML we have this my - app element which is the host element for our app component let's have another look at our app component look the selector is my - app so when angular sees my - app is going to put this template there and h1 with the courses element so I can chrome inside my - app you see h1 and courses and courses is the host element for our courses component and inside that you see h2 but where is this root my - app defined it in our HTML so I can vs code open the project folder collapse app open index.html scroll down in the body we have referenced my - app so angular saw this and it rendered app component as I explained a component encapsulate the data and the logic behind the view so we can define properties here in our component and display them in the template let's define a simple string property called title so title colon string and let's initialize it here so you see in typescript unlike JavaScript we can set the type of our variables now in this particular example we don't necessarily have to set the type because it can be inferred from the value assigned to the type so I can remove call and string directly initialize it and now if I hover my mouse over title the intellisense shows that this property is a string okay now let's change the template and display the title first I'm going to change this single quote to back tick which will allow me to break up this template into multiple lines the backtick character is on the top left of your keyboard just before the number one there you go and change the other one now I'll break it up and to render the title we use double curly braces this is called interpolation now if the value of this property in the component changes the view will be automatically refreshed angular will take care of that so we don't have to do anything special and this is called one-way binding we also have two-way binding which is used in forms for example when you type something into an input field that is bound to a property as you modify the value of the input field the property will be updated automatically you will see that later in the course so save back to Chrome it takes a couple of seconds until typescript compiler detects the changes regenerates the files and look browser sync updated the page automatically and here's the title now let's take this example to the next level I want to display a list of courses so first I would declare a property in the component courses and initialize it to a string array first one or two and three and then interview I'm going to use a ul and a bunch of lis to render the courses like this now I want these li is to be repeated for each course so we can use a special attribute here called ng for and note the asterisk this is part of the syntax and later I will explain why we set this to an expression something similar to the expressions we write in for each loops hash course of courses what does this mean courses is the object we are iterating which is in this case the property in our component of is just a keyword and hash course is a way to declare a local variable in our template so similar to forage loops this is our local variable that in every iteration it will hold one course at a time now between Li tags again we can use double curly braces or interpolation to display this course variable here save back to Chrome there you go so you see templates in angular look like HTML most of the time but sometimes we use special attribute like ng for here which is an example of a directive so this directive extends the HTML and adds extra behavior in this case it will repeat the Li element based on the expression assigned to it at this point our component is rendering a hard-coded list of courses but in a real-world application we often get the data from the server as I explained before this component should not include any logic other than the via logic so I'm not going to write the code to call the server and get the list of courses any logic that is not about this view should be encapsulated in a separate class which we call a service so let's create a service that this component will use to get the courses from the server so in the app folder right click you know file course dot service dot t-- s note the naming convention we start with the name of the service in this case course then dot service as a suffix and then duct es a service is just a plain class nothing more so export glass course service I'm going to define a method here get courses I can explicitly set the return type here like string array but now the compiler is complaining because a function whose declare type is neither void or any must return a value or consists of a single throw statement basically the compiler is complaining because the return type is a string array but we have not returned anything so I'm going to go back to our component control P on Windows or command P on Mac courses that component the TS I'm going to get this array of courses cut and servus paste it here and return it for now we don't want to get distracted by details of consuming a restful api so let's just imagine this service will actually call the server to get the data for simplicity for now we just return an array all I want you to pay attention to is that the component is not going to have any code to get the data from the server it will simply delegate to this service as you will see soon so we created this service now we need to use it in our component so course that component of TS first way to import the service so I on the top import course service from dot slash which means straight from the current directory course dot service that's it no dot TS here now that we have imported the symbol we need a reference to the service one way to do it is to create it in the constructor of courses component so I can create a constructor here constructor a new up course service like this but this would cause tight coupling between courses component and course service and this will lead to two big issues the first issue is that let's say in the future we create a custom constructor for our service that takes one or two parameters then we would have to get back to this component and any other components in the application that is using the service and modify its instantiation so add the extra parameters here so this is very fragile it will cause a lot of cascading changes a more serious problem of this tight coupling is that we won't be able to isolate this component and unit tested because when unit testing this component we don't want to have a server up and running with a restful api you want to use a fake or a mock service that doesn't really need a server and this way we can isolate the component and unit test it so to solve this issue we should not use the new operator here delete instead we pass a parameter here course service which is of type course service now note the naming convention the parameter name here uses camelcase so the first letter of the first word is lowercase and the first letter of every word after that is upper case but the naming convention for our class uses Pascal case so the first letter of every word should be uppercase so with this change our component is no longer tightly coupled to the service when unit testing this I can simply create a mock or a fake service and pass it in the constructor it wouldn't care now you might ask but somewhere we need to create the service and pass it to this component so how is this going to happen that's when a dependency injection framework comes into the picture the job of dependency injection framework is to inject dependencies of your classes when creating them so when creating a course component it looks at the constructor and sees we need a course service here this is a dependency so first it will create an instance of the service and then inject it into the constructor of this class this is what we call dependency injection but how do we the dependency injection framework well angular already has that built into it so we don't have to do anything magical there is just one more tiny step we need to do here but I'm not going to do it yet I'm going to run the application now so you can see a very important error and then we'll come back and fix it so save back to Chrome okay right-click somewhere inspect you see we have three errors here in the console tab scroll up look at this error no provider for course service so from courses component to course service this is the kind of error that you may often encounter when building angular 2 apps and this simply means courses component has a dependency on course service but angular does not know how to create that service so we need to teach it so back in the code in our component metadata here I'm going to add a new field so after the template providers look at the intellisense its type is any array any in typescript is a type that can hold any objects it's like var so we pass it all right here in this array we specify the dependencies for this component in this case course service and this solve our problem now let's finish the initialization of the courses property so in the constructor this that courses equals course service dot look at the intellisense get courses now our component is not coupled to the service it doesn't care where the data is coming from we have good separation of concerns and the service we may get the data from a restful api on the server or we may get it from local storage in the browser or from a cage or we might have hard-coded in an array the component doesn't care now I've got a small exercise for you I want you to use what you learned in the past few videos and extend this application to something like this so below the courses I want you to display the list of authors just to give you a bit of direction start with a component then set the required properties in your component and use interpolation to render them like this then extract the part that is supposed to get the list of authors from the server and put it in a service and finally use dependency injection and please please please spend 10 minutes and do this exercise because later we'll get into more complex topics and I'm going to make sure you master the fundamentals before we get there so please do your exercise and if you get stuck that's perfectly fine in the next video I'll show you my code okay so first I started by creating authors that component at TS in this module first we import component decorator from angular then we import author service next we apply the component decorator on our authors component class the selector I have used for this component is authors so anywhere in the HTML where we have authors element this component is going to be rendered and here's a template this is pretty much identical to what we did in the previous video so I didn't want you to do anything additional I just wanted you to get used to this new syntax that's all also note the providers field here because we're using dependency injection to inject author service into this component we need to teach angular how to create an author service and we do that by using the providers field here in this component I have two properties authors which use an array of string and title which is just a simple string in the constructor we get author service and then use that to set the author's property and then in app the component the TS I modify the template here so I added authors element just below courses so you see with this component we can break up a big page with lots of different features into smaller more manageable more maintainable components plus in the future I can get these authors and put it on a separate page instead of putting below courses and we'll get there very soon now when I did all this I ran the application but I did not see the authors I didn't have any errors so I was wondering why is it not rendered then I came back here and I realized I've added this authors element here but angular doesn't know which component is responsible for that because I forgot to put authors component in the list of directives that this template is using so chances are you made the same mistake as me if so this is your solution all right now let me show you a real world example of a custom directive look at this text box here when I click it it expands and when it goes out of focus it shrinks you probably have seen this in a lot of websites of course the real world examples are a bit more fancy they have an animation for now we don't have to worry about this stuff so in HTML we use the input tag to render a text box now I want to use a directive to extend the input tag such that if it has the attribute oughta grow it will have this behavior so in vs code under app folder I'm going to create a new file call it Auto - grow then dot directive dot TS first we start with a class just like before export class oughta grow directive we need to decorate this class with the directive decorator so first we import it import directive from angular 2 slash core and then apply it here in the metadata I'm going to use two fields one is selector which you're familiar with from the components so this is going to be a CSS selector for the host element so when angular is scanning a template if it finds an element that matches this CSS selector it's going to apply this directive on that element I'm going to use square bracket to refer to an attribute so if an element like an input has the attribute Auto grill this directive is going to be applied on that element next I'm going to use host which takes an object and we use host to subscribe to events rays from this element so I want to subscribe to two events focus and blur note the syntax here we supply events and their handlers using key value pairs so string in parentheses the event a like focus and then we set the value on focus so this is going to be a method in our directive class and this parentheses here means we're binding this unfocus method to the focus event one more time parentheses blur on blur parentheses let's go ahead create this method now here we need to access the host element how do we do that we need to import two services from angular so on the top I'm going to import element ref which gives us access to the host element and render which is a service that we use to modify that element now we need to create a constructor for this directive we give it two arguments one is L just an arbitrary name which is of type element reference the second is render which is a type render so angular would automatically inject instances of element Rev and renderer into this class dependency injection right now we need these l and render objects in unfocus and unblurred methods one way is to declare two private fields in this class and initialize them in this constructor using these arguments here something like this let's call one of them on the line L so we use underline to indicate that this is a private field which is of type element reference and then we can type this that underline L equals L but there is a shorter and cleaner way to achieve the same thing we don't need any of this stuff here we can use the private keyword before the argument name and the typescript compiler would automatically create a field called L in this class and then initialize it with this argument so I'm going to do the same here that's it now we go to unfocus we use this dot render dot set element style you don't have to memorize any of this time I just want you to see a directive in action later we have a complete section on directive so don't worry if all of this looks new to you now the first argument is the element we want to apply a style on so this the tail the second argument is the name of the style width and the third is the value let's make it 200 pixels of course this is just arbitrary it's a very basic implementation I really want to calculate that based on the content of the input for now let's not worry about it and then I'm going to copy this line and put it here so when it goes out of focus I want to set it to let's say 120 again this is arbitrary save so this is all we have to do to implement a directive so as you see a directive is just a class that has the directive decorator we give it a selector and then implement the logic inside this class now let's go to courses that components the TS in a template here just above the list of courses I want to add an input input of type text and apply Auto Gro attribute on it now if you run the application angular is going to ignore this because it doesn't know what is auto grow so we need to teach it to apply the auto group directive whenever it sees this selector so we use the directive field here in our component metadata directives which is an array and here we pass our to grow directive of course it's not recognized because we have an imported yet so on the top in part autograph directive from auto - growth dot directive now there is a temporary issue on my machine here and that's why you see this red underline don't worry about it everything is going to work now so in this section we had a brief look at components directives services and dependency injection throughout the rest of the course you will learn more about these building blocks in the next section I'm going to show you how to use property and event binding to display data and handle events raised from dom elements so i'll see in the next section so I guess you've been enjoying this video so far otherwise you wouldn't watch all these 50 minutes so I highly recommend you to take my complete angular course because there are lots of things I'm going to teach you there what do you have seen so far it's just the beginning it was just an introduction so as I told you before you can get this course with a discount using the link in the video description I hope to see you in the course

Channel: Programming with Mosh

Views: 1,036,028

Keywords: angular, angular.js, angularjs, angular2, angular 2, angular 4, angular4, angularjs 2, typescript, tutorial, mosh hamedani, javascript, jquery, dependency injection, angular crash course, angular tutorial, code with mosh, programming with mosh, angular 2 tutorial, learn angular, learn angular 4

Id: _-CD_5YhJTA

Length: 54min 12sec (3252 seconds)

Published: Fri Mar 04 2016