Angular Content Projection: UI Flexibility and Reusability

import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  standalone: true,
  imports: [],
  template: `
    <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>
  `,
  styles: [
    '.card { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin: 16px; }',
    '.card-header, .card-footer { background-color: #f0f0f0; padding: 8px; }',
    '.card-body { padding: 16px; }',
  ],
})
export class CardComponent {}

In this example, the CardComponent defines three slots: card-header, card-body, and card-footer. The content projected into these slots will be rendered within the corresponding sections of the card.

app.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { CardComponent } from './card/card.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, CardComponent],
  template: `
    <app-card>
      <div card-header>
        <h2>Angular is awesome</h2>
      </div>
      <div card-body>
        <p>Lets have a fun with it</p>
      </div>
      <div card-footer>
        <button>Read More</button>
      </div>
    </app-card>

    <app-card>
      <div card-header>
        <h2>Product Information</h2>
      </div>
      <div card-body>
        <img
          src="https://cdn-images-1.medium.com/v2/resize:fit:184/1*[email protected]"
          alt="Product Image"
          style="max-width: 100%"
        />
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
          <li>Feature 3</li>
        </ul>
      </div>
      <div card-footer>
        <button>Add to Cart</button>
      </div>
    </app-card>
  `,
})
export class AppComponent {}

Here, the app.component.ts demonstrates how the CardComponent can be used to create a card with custom content in the header, body, and footer sections. This modular approach enhances the reusability of the card component and provides the flexibility to create various card layouts without modifying the card component itself.

Conclusion

Angular content projection is a powerful tool for enhancing UI flexibility and reusability. By allowing dynamic injection of content into predefined slots, developers can build versatile components that adapt to different use cases. This promotes a modular and maintainable codebase, making it easier to create scalable and consistent user interfaces in Angular applications.