Content projection in angular: ng-content

Content projection is a powerful technique in Angular that allows you to pass content from a parent component into a child component which helps to create reusable components.

This is done using the <ng-content></ng-content> directive.

This concept you can relate with @input decorator concept in angular which is used to transfer data from parent to child component.

ng-content and @Input are both mechanisms for passing data from a parent component to a child component in Angular, but they serve fundamentally different purposes.

ng-content

• Purpose: Projects HTML content from the parent component into the child component.
• Data Type: Handles HTML elements and their content.
• Use Cases: Creating reusable components like cards, modals, and layout components where the structure of the content is dynamic and determined by the parent.

@Input

• Purpose: Passes data in the form of JavaScript objects or primitives from the parent component to the child component.
• Data Type: Handles JavaScript data types.
• Use Cases: Sharing data between components, configuring child component behavior based on parent data, and passing static content that doesn’t require dynamic HTML structure.

When to Use Which:

• Use ng-content when you want to project HTML content into a component, giving the parent control over the structure of the child component’s content.
• Use @Input when you want to pass data to a component without affecting its structure, allowing the child component to render the data based on its own logic.

We have two types of content projection:

• Single-slot content projection
• multi-slot content projection

Single slot content projection:

Single-slot content projection is the most basic form, where you have one placeholder for content.

<!-- Single slot content projection -->

<!-- parent.component.html -->
<app-card>
  <h2>Title</h2>
  <p>Description goes here</p>
  <button>Click me</button>
</app-card>

<!-- card.component.html -->
<div class="card">
  <ng-content></ng-content>
</div>

Multi slot content projection:

Multi-slot content projection allows you to define multiple placeholders in your child component and project different parts of the parent content into specific slots. This is achieved using the select attribute on the <ng-content> directive.

<!-- parent.component.html -->
<app-card>
  <h2 class="card-title">Title</h2>
  <p class="card-description">Description goes here</p>
  <button class="card-action">Click me</button>
</app-card>

<!-- card.component.html -->
<div class="card">
  <header>
    <ng-content select=".card-title"></ng-content>
  </header>
  <section>
    <ng-content select=".card-description"></ng-content>
  </section>
  <footer>
    <ng-content select=".card-action"></ng-content>
  </footer>
</div>

I am working currently on creating reusable card using content projection concept, I will update this link with my GitHub repository.

You can find many useful learning resource in my GitHub:

https://github.com/bittu1040

Thanks for reading till here, You can follow me if you like this article and learnt something new.

You can find me here for any further discussion:

https://www.linkedin.com/in/bittukumar-web/