Mastering Angular: Customize Your Components with Content Projection

Hi everyone! Today, we’ll dive even deeper into the angular and the content projection. We’ll explore practical code examples to demonstrate how you can customize your components using content projection.

Creating a Customizable Card Component with ng-content Imagine you’re building a card component to display various types of content across your application. Instead of creating multiple card components for each scenario, you can use ng-content to make your card component highly adaptable.

card.component.html:

<div class="card">
  <div class="card-header">
    <ng-content select="[card-header]"></ng-content>
  </div>
  <div class="card-body">
    <ng-content select="[card-body]"></ng-content>
  </div>
  <div class="card-footer">
    <ng-content select="[card-footer]"></ng-content>
  </div>
</div>

In this example, we’ve defined three content projection slots using the select attribute to target specific elements with the corresponding attributes.

Now, let’s see how to use this customizable card component:

app.component.html:

<app-card>
  <div card-header>
    <h2>Title</h2>
  </div>
  <div card-body>
    <p>Content goes here...</p>
  </div>
  <div card-footer>
    <button>Click me!</button>
  </div>
</app-card>

As you can see, the card component’s content can be easily customized by placing elements with matching attributes within the component tags.

Creating a Tab Component with ng-content and ngProjectAs Now, let’s create a tab component that can display different content based on the selected tab. Here, we’ll use ng-content in combination with the ngProjectAs attribute to create a flexible tab system.

tab-group.component.html:

<div class="tab-group">
  <ng-content select="app-tab"></ng-content>
</div>

tab.component.html:

<div class="tab" [ngClass]="{ 'active': isActive }">
  <ng-content></ng-content>
</div>

app.component.html:

<app-tab-group>
  <app-tab *ngFor="let tab of tabs; let i = index" [ngProjectAs]="app-tab">
    <ng-container *ngIf="selectedIndex === i">
      <h3>{{tab.title}}</h3>
      <p>{{tab.content}}</p>
    </ng-container>
  </app-tab>
</app-tab-group>

In this example, we’ve created a tab component and a tab group component. The tab group accepts multiple tab components using ng-content with the select attribute. Inside each tab, we project content conditionally based on the selectedIndex, using the ngProjectAs attribute to target the correct tab component.

By the power of ng-content and content projection, you can create highly customizable and reusable components in your Angular application. This not only improves the efficiency and maintainability of your codebase but also promotes a more modular and flexible design.