Introduction
The ng-content tag is used to create reusable and configurable Angular components. We can insert dynamic content using this tag as <ng-content></ng-content>. The angular parser will treat this tag as a placeholder and insert the user's dynamic content at its place. This feature is also called as content projection.
What is Content Projection?
Content projection is to project content in any component. Using ng-content, we can insert content from the parent component to the child component. We can configure our own content inside components using ng-content. Insert dynamic content using ng-content.
Now we will see an example of how Content Projection works in Angular using
<ng-content>. We will create a component in which we can do content projection using ng-content. Suppose we have a component called content and we will go to the app.content.projection.html file and write the below code.
import { Component } from '@angular/core'
@Component({
selector: 'app-content-projection',
template: `<div>
<textarea name="description" id="description"></textarea>
<button>
<ng-content></ng-content>
</button>
</div>`
})
export class AppContentProjectionComponent {
}
Now we will go to our app.component.html file where we will use the above component as follows:
<h1>Content Projection</h1>
<div>Please enter the description>
<app-content-projection><p>Click To Save</p></app-content-projection>
The content passed within the <app-content-projection>
Select Attribute In ng content
The select attribute of <ng-content> helps for multiple content projections in Angular. We can control content projection using <ng-content> at different places with the select attribute. The select attribute expects an element selector to decide which content needs to be placed within each <ng-content>.
Now we will see how Multiple Content Projection works in Angular using
<ng-content>. We will go to the app.content.projection.html file and write the below code.
<div class="logo">
<ng-content select="img"></ng-content>
</div>
<div class="content">
<ng-content select="p"></ng-content>
</div>
<div class="section">
<ng-content select="button"></ng-content>
</div>
<div class="footer">
<ng-content></ng-content>
</div>
Now we will go to our app.component.html file where we will use the above component
<h1>Content Projection</h1>
<app-content-projection>
<img src="https://www.image.com/image1">
<p>Content Projection for Content</p>
<button>Content Projection for Section</button>
<span>This is footer content</span>
</app-content-projection>
Now we have the first selector to render element. So the <img> element will be rendered in the Logo section. In the same way, the <p> element will be projected in the content section. The <button> element in the third section. The rest of the element will be placed within the footer section where we don't have any selector.
Comments
Post a Comment