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.5 Component-Only Lifecycle Methods

In addition to the general lifecycle methods available for both components and directives, there are also a series of lifecycle methods solely for use with components. We'll look at these lifecycle 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.5 Component-Only Lifecycle Methods

Hi folks. In this lesson, we're going to take a quick look at the component-only lifecycle methods that we can make use of. Angular provides four lifecycle methods which can be used with both components and directives, and we looked at those in the last lesson. But it also provides another four lifecycle methods which can only be used with components. The first two methods are both to do with content projection. Remember that content projection is the process of passing content from one template into another component's template. The ngAfterContentInit lifecycle method is invoked once, directly after Angular has projected external content into the component's template. To use this lifecycle method, we need to import it into a component's class from Angular's core module. Angular will invoke this method for us once AfterContent has been projected into the component or if no content is projected. This lifecycle method is invoked a single time directly after the ngDoCheck method has been invoked for the first time. One point to note about importing and specifying AfterContentInit is that it is purely optional. Even if we don't import this or specify it in the implements list, the ngAfterContentInit method will still be invoked by Angular. Let's just change this file to this instead. So let's go back to the browser now, and let's just look at the console. And we still see the AfterContentInit message. We actually see it twice so we can see the angular has invoked the method twice. The reason why we see it twice is because the controls component has been injected into the application twice. There are two instances of it. We can still do a production build as well, even without the interface. The benefit of using the interface, however, is in our tooling. We can see in the editor that we already have a linked error there on the ngAfterContentInit method. The linked message basically tells us that we should be using the interface. And it's useful to use the interface to avoid possible incorrect uses of the method. So let's just put the file back to how it was with the interface in it. And we can see that the linked error goes away now. Nothing changes. So, if we go back to the browser. We can still see our two occurrences of that log message. But it is recommended to always use the interface for lifecycle methods. So let's see what happens if we try to pass an argument through this method. So we can see that we've got a new linked error now, this time on the controls component class itself. And it tells us that the component is incorrectly implementing the after content init interface, and that's because it doesn't actually accept any arguments. So that's another reason why we should use the interface. It just avoids methods being used incorrectly. Another lifecycle method that is four components only is after content check. This method is called directly after the AfterContentInit method, but it's the encode again every time the ngDoCheck method is called. So this method maybe invoke numerous times while a component is in use. The final two component-only lifecycle methods are both to do with views. And these methods follow a very similar path into the content methods that we've just looked at. There is an ngAfterViewInit lifecycle method that Angular will revoke one time only when the view and any child views have been created. This method is invoked after the first AfterContentChecked method. This method is invoked after the first AfterViewInit method, similarly the ngAfterViewChecked lifecycle method is similar to AfterViewInit, but it will be invoked every time the AfterContentChecked method is invoked. And so it maybe invoked multiple times during a component's lifecycle. Both of these methods can be used in the usual way by importing and adding the interface to the implement list of the class, and then adding the corresponding method to the class. So again, we're not gonna be using the ngAfterContentInit method. So let's put this component back to how it was at the start of the lesson. So in this lesson, we looked at some lifecycle methods that are only available when using components. We discussed the ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, and ngAfterViewChecked lifecycle methods. And we also covered why it is recommended to make use of the interface for these lifecycle methods when we choose to make use of them. Thanks for watching.

Back to the top