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