FREELessons: 67Length: 8.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.4 Component and Directive Lifecycle Methods

Components and directives have a well-defined lifecycle, with Angular creating and destroying each of them as required as users interact with our app. Angular provides useful hooks into key moments during the lifecycle of a component or directive, and we'll focus on these methods in this lesson.

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.4 Component and Directive Lifecycle Methods

Hi folks, in this lesson we're going to learn about the lifecycle methods that components and directives have in Angular. Angular provides a series of different hookes that we can use to react to key moments in a component's life cycle. Let's take a look. One of the most common lifecycle methods is ngOnInit. This lifecycle method is so common that the Angular CLI adds it to all components that we generate by default. We did take a brief look at this earlier in the course but let's just go over it again. So we can open up any of the components that we've created and see it. Let's just open the Controls Component class file. So we import OnInits from the Angular core module, and we specify there are component implements OnInits within the class. We then have to add a method called ngOnInit. In Angular we'll invoke this method once it has initialized the component. So we can use this method to do any setup that is required. Now all classes also have a constructor. And all components can make use of the ngOnInit method. So, what should we use each one of these things for? For components or directives specifically, we should use the constructor only for dependency injection. Any actual initialization work that needs to be carried out should happen on the ngOnInit method. Because the constructor will be invoked automatically when Angular news up the component class deep inside Angular somewhere, way before the page loads. We can't test any code inside the constructive area easily. The ngOnInit method on the other hand can be tested very easily. Because we can simply code the method ourselves from within the test. So it's more maintainable if we have a simple rule like always do initialization in the same place. So the ngOnInit method is invoked when the component is initialized. This means that any values parsed into the component has been set. And as I mentioned, the instructor will have already been called way before the ngOnInit is invoked. In terms of the order in which life cycle methods are invoked, ngOnInit may be the first or second life cycle method to be invoked. If we do pass data into the component, another life cycle method will be invoked first. The ng on-changes method. But if we don't pass any data into the component, like with the controls component at the moment, we aren't passing any data into the component here. And so the ngOnInit method will be the first to fire. When we are passing data into components, the ng on-changes method will be invoked first as it receives the initial data. And then the ngOnInit method will be called after this. The ng onChanges method may, however, may be called subsequent times whenever the data it is consuming changes. The ngOnInit method isn't passed any arguments. But the ngonChanges method does receive an object containing the old and new values for the data that changed. If we want to make use of the ngOnChanges method, we just need to import, it, implement it and add the method. So we import two new things here on changes, which is an interface and simple change that would be simple changes. Which is a class, both of these are imported from the Angular core module.. So now we can implement on-changes. We just do that by providing it after the OnInit, we don't need to specify implements twice. And now we need to actually specify the ngOnChanges method. So the ngOnChanges method will receive the changes, these will be of the type simple changes. Another lifecycle method is ngDoCheck, which we can use to detect changes that may be outside of Angular's control, like if we're using a third party library or something. As with the other life cycle methods, we can import the interface, add it to the implements list and add the method for it. This method will be called after ngOnChanges and after ngOnInit and this method doesn't receive any arguments. This method will be invoked every time the Angulars own change detection runs. So this method could both be invoked numerous times in a components lifecycle. The last general lifecycle method that is available for both components and directives is ngOnDestroy. We should use this method to tidy up after a component, and unsubscribe from observables or remove any event handlers in order to avoid memory leaks. This method is called just before Angular, destroys the component. And again this method doesn't receive any arguments. So we don't need to actually use any of these lifecycle methods in this components. So let's get rid of everything that we've added in this lesson, including the ngOnInit method, which the CLI added for us, but which we aren't going to use with this component. So throughout the course, we will be using some of these lifecycle methods and at that point we can looking to how they are used in a bit more depth. I just wanted to show you how they can actually be implemented and the order in which they are usually fired. We're not in a place yet, really, where we can make use of any of them. So, in this lesson, we've looked at the lifecycle methods the Angular will invoke for us if we define them at different point of the lifecycle of our component or directive. We haven't looked at any directives yet, we will come to those later in the course. We saw that there are four lifecycle methods that can be used with both components and directives ngOnChanges, ngOnInit, ngCoCheck and ngOnDestroy, which are invoked on a minimum in its respective order. Some of them, like ngOnChanges, or ngDoCheck, might be evoked numerous times, depending on how the component is interacted with. Thanks for watching.

Back to the top