Component Projection in Angular – #2

This Post is a continuation of  Content Projection In Angular #1. Please go through that post before reading this one. Thanks.

So in the previous post, I have reused a common form template using content projection. In this post, we are going to see how to project a component itself.

Scenario:

We have a login form from the previous post. It is obvious to have a remember me checkbox for a login form. We are going to create a new remember me component and project it like we did in the previous post.

Code:

remember-me.component.html

remember-me.component.ts

In the above code, I have created a component with only one checkbox, and when the checkbox value is changed, the value is emitted to the parent component. Lets project this component.

userform.component.html

app.component.html

app.component.ts

Explanation:

I have projected the component in the app.component.html using this line of code
<app-remember-me (checked)="RememberUser($event)"></app-remember-me>
app-remember-me component returns an event which is a boolean, and I’m using that value in the app.component.ts using this line of code
RememberUser(checked:boolean){
this.RememberMe = checked;
}

and on the click event of Login button, I’m just writing the value of the form and the checkbox in the console.

Result:

You can get the code from my repository.

Share your thoughts