Have you ever felt the need of writing a component like the following
Angular provides an element called ng-content which can used to write configurable components. This is called Component Projection, neaning the content that will be procvided inside the opening and closing brackets will be projected. It will be rendered inside a <ng-content> element. It means that you must include a <ng-content> tag somewhere in your components html template so that the provided content can be projected inside it.
So your my-component should have a template like the following
The ng-content inside above tempalte will be replaced with the provided html between <my-component> and </my-component>
I solved a very complex using this component. If you are inerested in kowing what I did, please check out my following post.
<my-component>
<div> Some text here </div>
<div> Some text here </div>
<div> Some text here </div>
<div> Some text here </div>
</my-component>
Now your intention here is to have your custom component and keep having the additional html that you have written between statring and ending tags. If yes, then you are on the right place.Angular provides an element called ng-content which can used to write configurable components. This is called Component Projection, neaning the content that will be procvided inside the opening and closing brackets will be projected. It will be rendered inside a <ng-content> element. It means that you must include a <ng-content> tag somewhere in your components html template so that the provided content can be projected inside it.
So your my-component should have a template like the following
// myComponent.component.html<div class="row"> This is a row <ng-content></ng-content> </div>
The ng-content inside above tempalte will be replaced with the provided html between <my-component> and </my-component>
I solved a very complex using this component. If you are inerested in kowing what I did, please check out my following post.
Comments
Post a Comment