You don’t know Angular —A Guide to Angular Projection
Let me tell you very honestly, after providing various workshops and training for Angular, I realized that most of us are not leveraging the actual power of this magical framework.
So, I decided to launch the You don’t know Angular Series.
In this blog series, I will touch the powerful corners of the Angular framework which are left untouched by the developers. If you are a beginner at Angular, I will suggest you go through the Angular Docs once before reading this post.
In this first post of the series, we are going to cover an interesting and powerful topic Angular Projections.
Learning Objectives
- Projecting content into Components using ng-content
- Projecting data into selected-slots
Motivation
Let’s say we want to design a signup form but at the same time, we also have to design a login form. Now, both of these forms are same apart from some data like heading and button.
Generally, developers design two separate components signup component and login component for achieving this functionality.
However, we will design only a single component and then will project our data in it using ng-content.
Projecting content using ng-content
We can simply create a component say auth-component and app-component. We are calling auth-component from app-component. The ng-content
then can be used inside the auth component to project the data passed from the app-component.
Let’s see how we can use ng-content
inside our auth-component.
Here, the data passed inside the component will be projected in place of ng-content. Our next step is to learn how to pass the data.
In our app.component.html
we will call this component and pass the data inside it.
Here, we have called app-auth
two times. We passed the Sign up here for the first time and Login here as the second time, which will be projected in the component in place of ng-content
as shown in the image.
Projecting data into selected slots
Now, what will happen if you pass a lot of data between the auth component tags? What if, you want to use that data on different places in your component.
For example: I will pass heading and button between the auth-component tags.
<app-auth>
<h2>Signup here</h2>
<button>Signup</button>
</app-auth>
Here, I don’t want to project it directly in place of ng-content
. I want to project it at different places inside the component. These places are called projection slots. Here, we created two projection slots with select
. In the first one, we will insert the h2
and in the second one, we will insert the button.
We have passed the data with h2 and button while calling the component app-auth
which will be injected at specific slots
Note: The select attribute just behaves like a CSS selector and hence you can use id, classes or tag names in it.
Summary
Sometimes, we need to make the component based on the user’s choice, at that time content projection really helps us in projecting the data into the component that is provided by user.
Also, projecting data in a component at different places which is known as projection slots, provides us a lot of control over a component.
In case you need the code, you can go to the repository:
In the next post, we will cover creating and destroying the component dynamically in an Angular Application, till then:
ng-bye ….