Ng-Content Angular

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> is the content for projection. This content will be rendered inside the tag. We can pass HTML tags, other components, texts inside based on our requirement. In this case, the placeholder for our <p> tag and the button text. We can dynamically use this component at various places and pass different button texts easily. is very simple to use and implement for dynamic content in our Angular application.

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 as follows:

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