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.


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.




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.





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
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.


You can get the code from my repository.

Share your thoughts