7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.6 Decorators

In this lesson we'll take a look at the concept of decorators in a little more detail. We'll look at some of the most commonly used decorators and see some examples of their use.

1.Introduction
6 lessons, 42:00

1.1
Introduction
00:48

1.2
Get Started With Angular-CLI
11:09

1.3
Developing With Angular-CLI
13:17

1.4
TypeScript vs. JavaScript
06:54

1.5
Angular Modules From the CLI
04:31

1.6
CLI Options
05:21

2.Get Started With Angular
7 lessons, 42:38

2.1
Bootstrapping the Application
04:30

2.2
The Application Module
04:15

2.3
The Application Component
08:06

2.4
Component Styling
03:06

2.5
Global Styling
05:11

2.6
Creating a Component With the CLI
09:34

2.7
Creating a Service With the CLI
07:56

3.Core Concepts
7 lessons, 55:20

3.1
Component Trees
06:20

3.2
Dependency Injection
06:52

3.3
Content Projection
05:38

3.4
Component and Directive Lifecycle Methods
06:31

3.5
Component-Only Lifecycle Methods
05:28

3.6
Decorators
07:36

3.7
Models
16:55

4.Template Deep Dive
11 lessons, 1:10:56

4.1
Basic Data Binding With Interpolation
05:35

4.2
Property Bindings
07:07

4.3
Attribute Bindings
03:29

4.4
Event Bindings
08:16

4.5
Class and Style Bindings
05:44

4.6
The `NgClass` and `NgStyle` Directives
05:04

4.7
The `*ngIf` Directive
04:41

4.8
The `*ngFor` Directive
09:29

4.9
Inputs
05:33

4.10
Using Pipes in a Template
07:31

4.11
Using Pipes in a Class
08:27

5.Forms
10 lessons, 1:45:41

5.1
Handling User Input With Template Reference Variables
07:06

5.2
Template-Driven Forms
11:10

5.3
Template-Driven Forms: Validation and Submission
14:00

5.4
Reactive Forms
11:26

5.5
Using a `FormBuilder`
08:01

5.6
Reactive Validation With Built-in Validators
14:53

5.7
Creating Custom Validators for Template-Driven Forms
12:18

5.8
Creating Custom Validators for Reactive Forms
08:26

5.9
Observing Form State Changes
12:40

5.10
Working With the `@HostListener` Decorator
05:41

6.Routing
9 lessons, 1:15:10

6.1
Defining and Configuring Routes
07:53

6.2
Rendering Components With Router Outlets
10:14

6.3
Using Router Links for Navigation
05:25

6.4
Navigating Routes Using the Router
06:24

6.5
Determining the Active Route Using an Activated Route
07:16

6.6
Working With Route Parameters
10:42

6.7
Using Route Guards
07:36

6.8
Observing Router Events
10:55

6.9
Adding Child Routes
08:45

7.Using the HTTP Client
5 lessons, 56:24

7.1
Sending an HTTP Request
10:52

7.2
Handling an HTTP Response
11:22

7.3
Setting Request Headers
12:33

7.4
Intercepting Requests
09:04

7.5
Finishing the Example Application
12:33

8.Testing
10 lessons, 1:23:27

8.1
Service Unit Test Preparation
10:45

8.2
Unit Testing Services
13:24

8.3
Component Unit Test Preparation
12:35

8.4
Unit Testing Components
07:27

8.5
Unit Testing Component Templates
06:58

8.6
Unit Testing Pipes
04:41

8.7
Unit Testing Directives
04:56

8.8
Unit Testing Validators
04:48

8.9
Unit Testing Observables
11:37

8.10
Unit Testing HTTP Interceptors
06:16

9.Building for Production
1 lesson, 03:40

9.1
Building for Production
03:40

10.Conclusion
1 lesson, 01:32

10.1
Conclusion
01:32


3.6 Decorators

Hi folks, in this lesson we're going to take another look at decorators. We have mentioned them a couple of times already, and we've had a brief look at the module and component decorators. But I just want to cover them in a bit more detail now that we have a little bit of a better understanding of Angular. Decorators are interesting because they are currently part of TypeScript only and do not exist in JavaScript yet. They are that the proposal stage however, so they will almost certainly be coming to a future version of JavaScript. We don't need to fully understand how decorators work in order to learn how to use them in Angular. There are a number of different types of decorators in the ES Nex proposal, such as class decorators, property decorators, and method decorators. Angular also makes use of different types of decorators. We looked at the class decorators, ng module and component earlier in the course. Let's just take a quick look at them again. The NG module decorator is used in Angular modules. The decorator is used to specify meta information such as the components that make up a module, other modules to import. Services that should be available to all components within the module, and the root component which needs to be boot strapped. The decorator appears directly before the class that it decorates and is applied to the constructor of the class once the class has instantiated. The component decorator is used to specify meta data about a component. Such as the selector that is used to add the component to a page and the resources that it needs such as the templates and the stylesheets. This decorator is also a class decorator and it is specified directly before the class that it decorates. One more class director that we've seen already is the injectable decorator. I mentioned earlier that service should always have this decorator, it's not required in all scenarios, but it's just easier to always use it. The actual role with the injectable decorator is the only services which have other services injected into them through dependency injection need to have this decorator. If we try to inject a service into another service and that service doesn't have this decorator, the app will start to throw errors in the console. If we have a service that doesn't have any other services injected into its constructor, like this constant service then it won't need the decorator. The reason why it's just better to always add it, is to even if a service doesn't have any other services injected into it now. That doesn't mean that it will always not have any other services injected into it. As your application grows, you'll find that services gain more dependencies. And it's easier to just inject a service than it is to inject a service and remember to add the decorator. Other class decorators that Angular provides are the directive decorator, which is used to create directives, and the pipe decorator for creating pipes. A directive in Angular is used to define a new attribute that can be added to an element in a template. And a pipe is a filter that can be used to control what data is displayed in a template. We'll look at both directors and pipes later in the course. As well as class decorators, we can also use property or field decorators. Instead of being applied to entire classes, these decorators are applied only to individual properties or fields of the class. We haven't seen any of these in action yet, so let's see which ones are available. Probably the most commonly used property decorators are the input and output decorators. Which I use to pass data into, or out of a component. So, the first thing we'll need to do is import the decorators which are available via Angular's core module. So now let's say that we wanted to pass a value into the start component here, and we wanted to bind this to a property called data. In this case, we can just decorate this as an input. So we've specified a new public property called data, which could be of any type, and it's been decorated with @input. Angular would expect external data to come into this property from the components templates. We'll be looking at template binding in detail in the next section, so don't worry too much about this for now. Just understand that if we use the input decorator before the name of the property we are decorating, then it becomes an input property, and it doesnt require the public keyword, it will automatically be public. This decorator doesn't take any arguments, but it still needs to be invoked as if it were a method. The output decorator is used to send data out of a component, which is always in the form of an event. So, for this decorator, we need another dependency from Angular's core module. We need to bring in an event emitter, and again, we just decorate the property that we want to be an output property. So the format for this decorator is slightly different. Again it's specified directly before the property that we are decorating, and again it will automatically be public so it will be visible to the template. We specify the type information this time, and the outgoing data property is of the type event omitter. and the type of data that it will emit is a string, and we can create a new instance of the event emitted directly after the type. So the type information and the instance are all part of the same expression. There's actually a less verbose way that we can write an expression that means the same thing and is equally valid, but I prefer it because it's slightly more condensed. So this time we combine the instance with the type information. Because it's a new event emitter, Angular already knows that the type of outgoing data is going to be an event emitter. That's implied by the expression, and we just add the typing for the value that actually gets emitted to the part where we initialize the new instance. Like I say that's equally valid but it's a bit shorter so it's generally prefered. So both of these properties won't do anything at the moment they require things in the template. We haven't really focused much on templates yet, so I just wanted to introduce some of these decorators as they're very commonly used. When we do look at templates in the next section, we will look at both of these types of decorator in more detail. So in this lesson, we've had a quick overview of decorators and reviewed some of the fundamental ones that we looked at briefly earlier in the course, such as NG module and component. We also looked at the commonly used property decorators, inputs and outputs. And, just saw some basic examples of how they're used in a component class, thanks for watching.

Back to the top