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.

Component Rendering using ng-content

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

Signup and Login with 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:

aayusharora/You-Dont-Know-Angular

In the next post, we will cover creating and destroying the component dynamically in an Angular Application, till then:

ng-bye ….

If you liked the article, please clap your heart out. Tip — Your 50 claps will make my day!

Please also share on Fb and Twitter. If you’d like to get updates, follow me on Twitter and Medium. If anything is not clear or you want to point out something, please comment down below.