Angular Content Projection

Level : Intermediate

Mentor: Shailendra Chauhan

Duration : 00:02:15

Content Projection

Content projection in Angular allows you to pass and project content from a parent component into a child component's template. This mechanism enhances reusability and flexibility by letting you inject dynamic content into predefined slots.

Example

<!-- Parent Component Template -->
<app-child>
  <h2>Title</h2>
  <p>Content to project</p>
</app-child>

Single-Slot Content Projection

Single-slot content projection allows you to project content into a single designated slot within a child component. This is useful for scenarios where you have a single, well-defined area for content injection.

Example

<!-- Child Component Template -->
<div class="container">
  <ng-content></ng-content>
</div>

Multi-Slot Content Projection

Multi-slot content projection enables you to define multiple slots within a child component, allowing you to project different pieces of content into separate slots based on your needs.

Example

<!-- Child Component Template -->
<div class="header">
  <ng-content select=".header-slot"></ng-content>
</div>
<div class="content">
  <ng-content select=".content-slot"></ng-content>
</div>

Conditional Content Projection

With conditional content projection, you can use Angular's structural directives like ngIf to conditionally project content into a child component, making it dynamic and responsive to specific conditions.

Example

<!-- Parent Component Template -->
<app-child>
  <ng-template let-showContent [ngIf]="showContent">
    <p>Conditional content to project</p>
  </ng-template>
</app-child>

Projecting Content in More Complex Environments

In more complex scenarios, you can combine content projection with Angular's component hierarchy to create reusable and versatile components. This technique is particularly valuable when building libraries or frameworks.

Example

<!-- Parent Component Template -->
<app-accordion>
  <app-accordion-item>
    <h3 slot="header">Section 1</h3>
    <p slot="content">Content for section 1</p>
  </app-accordion-item>
  <app-accordion-item>
    <h3 slot="header">Section 2</h3>
    <p slot="content">Content for section 2</p>
  </app-accordion-item>
</app-accordion>

Self-paced Membership

Upto 60% OFF

Know More

Still have some questions? Let's discuss.