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.
- Projecting content into Components using ng-content
- Projecting data into selected-slots
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.
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.
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
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.
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:
GitHub is where people build software. More than 28 million people use GitHub to discover, fork, and contribute to over…github.com
In the next post, we will cover creating and destroying the component dynamically in an Angular Application, till then: