Using ng-content in Angular

The <ng-content> directive in Angular is used for content projection, allowing you to pass content from a parent component to a child component. This tutorial covers how to use <ng-content> effectively to create flexible and reusable components.

What is ng-content?

The <ng-content> directive acts as a placeholder for content that is projected from a parent component into a child component. This allows you to create reusable components that can accept and display different content based on the context in which they are used.

Basic Usage of ng-content

Here is an example of a simple component that uses <ng-content> to project content:

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

@Component({
  selector: 'app-card',
  template: `
    <div class="swf-lsn-card">
      <ng-content></ng-content>
    </div>
  `,
  styles: [`
    .card {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
    }
  `]
})
export class CardComponent {}

Using the Card Component

You can use the <app-card> component in a parent component and project content into it:

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

@Component({
  selector: 'app-root',
  template: `
    <app-card>
      <h2>Card Title</h2>
      <p>This is some content inside the card.</p>
    </app-card>
  `
})
export class AppComponent {}

Multiple ng-content Slots

You can use multiple <ng-content> slots to project different parts of the content into specific locations within the child component. This is done using select attributes.

Example with Multiple Slots

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

@Component({
  selector: 'app-multi-slot-card',
  template: `
    <div class="swf-lsn-card">
      <div class="swf-lsn-card-header">
        <ng-content select="[card-header]"></ng-content>
      </div>
      <div class="swf-lsn-card-body">
        <ng-content select="[card-body]"></ng-content>
      </div>
      <div class="swf-lsn-card-footer">
        <ng-content select="[card-footer]"></ng-content>
      </div>
    </div>
  `,
  styles: [`
    .card {
      border: 1px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
    }
    .card-header, .card-body, .card-footer {
      padding: 10px;
      margin-bottom: 10px;
    }
    .card-header {
      background-color: #f5f5f5;
    }
    .card-footer {
      background-color: #f5f5f5;
    }
  `]
})
export class MultiSlotCardComponent {}

Using the Multi-Slot Card Component

You can use the <app-multi-slot-card> component in a parent component and project content into specific slots:

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

@Component({
  selector: 'app-root',
  template: `
    <app-multi-slot-card>
      <div card-header>Card Header</div>
      <div card-body>This is the body of the card.</div>
      <div card-footer>Card Footer</div>
    </app-multi-slot-card>
  `
})
export class AppComponent {}

Key Points

Conclusion

The <ng-content> directive in Angular is a powerful tool for content projection, allowing you to create flexible and reusable components. By understanding and using <ng-content> effectively, you can enhance the modularity and reusability of your Angular applications. Happy coding!