🚀Enhancing Content Projection in Angular

Let’s discuss content projection in Angular, highlighting its use in customizing components like cards, tables,etc. through examples. This technique, ideal for static data, allows for code customization, with the parent component managing logic and the child handling UI

In simple terms, content projection is about passing HTML or components from one component to another in Angular.

How can you declare content projection in a component ?

if you see these tag <ng-content></ng-content> it means this component project some code from its parent.

Content Projection Types:

• Single Slot Content Projection
• MultiSlot Content Projection
• Conditional Content Projection

Single-slot Content Projection:

“Single-slot content projection” is a term that defines a component capable of projecting only one other component, and nothing more.

Let’s create two components for Content Projection — a parent and a child (card component).

//card.component.html
<mat-card class="example-card">
    <ng-content></ng-content>
</mat-card>

//parent.component.html
<app-card>
  <h1>Single Projection</h1>
</app-card>

Multi-slot Content Projection:

In Angular, a component can have multiple slots for content. This pattern is called Multi-slot content projection. To specify where the projected content should appear, you need to use this pattern.

When a component accepts content from multiple sources, it is referred to as multislot content projection.

we can conditionally show these data ng-content provides us select attribute to select which content we want to display can use the select attribute to conditionally display specific content.

Selection Attributes :

• Select by tag name
• Select by Id
• Select by Class

Projection using select by tag name

<!-- CHILD COMPONENT -->
<!-- BY SELECT TAG -->
 <mat-card-content>
    <ng-content></ng-content>
  </mat-card-content>
  <mat-card-actions select="[actions]">
  </mat-card-actions>

<!-- PARENT COMPONENT -->
<!-- BY SELECT TAG -->
<app-card>
  <ng-container actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </ng-container>
</app-card>

Projection using select by tag id

<!-- CHILD COMPONENT -->
<!-- BY SELECT Id--> 
<mat-card-title>
      <ng-content select="#title"></ng-content>
 </mat-card-title>

<!-- PARENT COMPONENT -->
<!-- BY SELECT Id -->
<app-card>
  <h1 id="title">Card Title</h1>
</app-card>

Projection using select by tag class name

<!-- CHILD COMPONENT -->
<!-- BY SELECT Class Name-->   
<mat-card-subtitle>
      <ng-content select=".subtitle"></ng-content>
</mat-card-subtitle>

<!-- PARENT COMPONENT -->
<!-- BY SELECT Class Name -->
<app-card>
  <h5 class="subtitle">Card Subtitle</h5>
</app-card>

Final Result

<!-- CHILD COMPONENT -->
<app-card>
  <h1 id="title">Card Title</h1>
  <h5 class="subtitle">Card Subtitle</h5>
  <ng-container actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </ng-container>
</app-card>

<!-- PARENT COMPONENT -->
<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>
      <ng-content select="#title"></ng-content>
    </mat-card-title>
    <mat-card-subtitle>
      <ng-content select=".subtitle"></ng-content>
    </mat-card-subtitle>
  </mat-card-header>
  <img
    mat-card-image
    src="https://material.angular.io/assets/img/examples/shiba2.jpg"
    alt="Photo of a Shiba Inu"
  />
  <mat-card-content>
    <ng-content></ng-content>
  </mat-card-content>
  <mat-card-actions select="[actions]"> </mat-card-actions>
</mat-card>

Conclusion:

This article delves into the concept of content projection, exploring its various types and the advantages it offers. We’ll particularly emphasize its utility in enhancing user interface tasks, demonstrating how it can be a powerful tool for Angular developers.

Github Repository: https://github.com/tacettinsertkaya/ContentProjectionAngular