In this guide, I want to take a look at how you can use decorators in angular 2 applications where we're not obviously going to build an angular 2 application because that requires a decent amount of configuration set up and that would be skipping ahead quite a bit. So in this way I wanted to do instead was just show you how angular to implements decorator's because one I want you to see the importance of it but two I want to give you a real-world example of how they're used because I know a number of the examples I went through may seem a little bit theoretical and I always want to attach anything I teach with something showing you how you would use it in a real program.

So here I took this out of the angular to tutorial provided by Google and this is just a very basic class and component page. So what we're doing here is we're importing a library called component from angular core. Now, this is the cool thing come down to line 8. And do you notice how the syntax looks that @ symbol is showing that component is a decorator and we are decorating the app component class right here and inside of the component we're passing and some other things.

So you can see that because component has the parentheses. This is just an argument to component and then has these params. So that means that we're passing in a javascript object. So here we're passing in a selector called my app and then we're passing in a template and this template is going to be what gets rendered on the page. Then from there all of this is sent through the app component because it's all available through this class page. So this is just a very basic example of how decorators are used. So hopefully you can see that this isn't that scary if we go back to some of our examples I know that in order for me to create them I had to go through a lot of code in showing how to build a component from scratch. When it comes to how you're most likely going to be using components on a day to day basis in angular 2 you're more than anything you're going to be focused on just implementing them. So I didn't want you to go through this course and then start an angular 2 course and wonder what in the world these symbols are. And you know how they apply it to passing values in and how they work with typescript.

So I wanted to give you a really full idea for the behavior of decorators so that when you go in and start building real angular 2 applications then you're going to know right away. Oh OK. Yeah. Decorator's these are the things that go on top of methods or on top of classes that you can layer behavior and things like that on top and that's all that for the most part they are going to be doing especially in the beginning. If you're taking this course and then I'm assuming you're kind of on the beginning side of it starting with Javascript development from an angular and typescript perspective. So I can give you a good idea for the foundation of it. Then once you get inside now you're going to know right away what this does for at least from a behavior point of view. There's a whole list of the things that you have to learn inside of angular for how components behave and the different things you can pass to them. That's something that is specific to an angular course. You will know just by looking at this code comparing it with the code we wrote that a component is a decorator that we're passing items in as an argument. And from there it's going to be applied to the app component and you're going to be able to have access to all of this. And from a web or mobile application perspective it means that all of this is going to be rendered on the page.

So that is how angular to leverage is decorators in order to help you build applications.

Resources

• Source code