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.3 Content Projection

Content projection is the process of passing content from the template of one component into the template of another component. It can be useful when creating reusable and scalable components, so in this lesson we'll take a look at the basic concept.

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.3 Content Projection

Hi folks, in this lesson we're going to learn about content projection. This is a fundamental concept that you should be aware of, but won't necessarily use all of the time. Content projection is the practice of projecting content from outside of a component into a component. This is the modern Angular version of transclusion, for anyone familiar with the original AngularJS. In the example application we added a controls component. And we then used this controls component in a number of places, such as in the template for the game components. The app controls element in the game component is used to render the content of the controls component. But by default, if we place any content inside the custom component, it will not get rendered. So, if we change the element like this. When we go and look in the browser, We can see that out heading has been lost. It's not rendered alongside the controls. If we look in the dome, we can see that there is no H1 in there at all. It's just been completely discarded. Even though the H1 element has been lost, it's actually very easy not to lose it in the first place. Components do support content projection by default. We just need to add a special element to the template of the component that we're projecting into, which in this case would be the controls component. We just need to add a special ng-content element. So let's go back to the browser now. We can see that we do now have two sets of buttons because the H1 that we've projected into the component is now interfering with it. There's the heading underneath the other buttons, content projection test. And that's the element that we injected into the app-controls custom elements. So if we want to project content into a component, we just need to use an ng- content element. And that's where the projected content will get inserted. As well as projecting content into a single location, we can use multiple ng-content elements and project different bits of content into different bits of the component. So let's update the previous example that you project the content both above and below the buttons. So this time we've added the select attribute, and we've added a selector there in both places. The first one is .above and the last one is .below. So it's a very simple syntax. And now back in the place where we are projecting the content. We just need to add some classes to the elements that are being projected. So in the place where we are doing the projection, we just need to add matching class names to the various elements. And they will get selected by the ng-content selectors that we added in the Controls component. So let's go back to the browser now. And now we can see that something has been added above and we can kind of see that something is below, just to try and tidy up a bit. Okay, so that looks a bit tidier. But you can see the point of the example is to show how easy it is to inject special content into a component from outside of that component. Usually in the place where the component is embedded. We can also use tag names instead of class names, but one thing that we can't use is ID attributes. So we could do something like this. And we find that that works in the same way. The styling is a bit different, because we've got some styling for H2s and H3s already. But, you can just about see it behind the buttons there. But we can't use IDs. And as we can see that just doesn't work at all. So we don't actually need to project this content, but I wanted to show you an example of it because it is so very common and so very useful. But let's just delete these content tags. We aren't going to actually use those. And we'll delete the other part in the game component as well. So in this lesson, we've learned about content projection in Angular. Which is where we can insert content from one components template into another component using the ng-content custom element. We also saw that we can use multiple ng-content elements which use the select attribute to specify the content that I should receive. And match this and the other templates using class names or element names. Thanks for watching.

Back to the top