The ng-content directive in Angular is a powerful tool that allows you to project content into a component.

It enables you to create more flexible and reusable components by providing a way to include content from the parent component. In this blog post, we’ll explore how to use ng-content in Angular components.

Basic Usage

Let’s start with a basic example of using ng-content in a simple parent-child component relationship.

// parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h2>Parent Component</h2>
      <app-child>
        <p>This content is projected into the child component.</p>
      </app-child>
    </div>
  `,
})
export class ParentComponent {}
// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <div>
      <h3>Child Component</h3>
      <ng-content></ng-content>
    </div>
  `,
})
export class ChildComponent {}

In this example:

  • The app-parent component includes the app-child component.
  • Inside the app-child component template, the <ng-content></ng-content> tag is used to project content from the parent component into the designated location within the child component.

When the application runs, the content provided in the parent component is dynamically inserted into the <ng-content></ng-content> tag in the child component.

Content Projection with Selectors

You can use ng-content with selectors to project content based on specific criteria.

This allows for more targeted content projection.

// parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h2>Parent Component</h2>
      <app-child>
        <p>This content is projected into the default slot.</p>
        <p slot="additional">This content is projected into the additional slot.</p>
      </app-child>
    </div>
  `,
})
export class ParentComponent {}
// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <div>
      <h3>Child Component</h3>
      <ng-content></ng-content>
      <div class="additional-content">
        <ng-content select="[slot=additional]"></ng-content>
      </div>
    </div>
  `,
})
export class ChildComponent {}

In this example:

  • The parent component provides content to the default slot and an additional slot with the help of the slot attribute.
  • In the child component, <ng-content></ng-content> is used to project content into the default slot, and <ng-content select="[slot=additional]"></ng-content> is used to project content into the additional slot based on the attribute selector.

Content Projection with ng-container

You can use ng-container to conditionally project content based on certain conditions within the parent component.

// parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <div>
      <h2>Parent Component</h2>
      <app-child [showContent]="true">
        <p>This content is projected into the child component.</p>
      </app-child>
    </div>
  `,
})
export class ParentComponent {}
// child.component.ts

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

@Component({
  selector: 'app-child',
  template: `
    <div>
      <h3>Child Component</h3>
      <ng-container *ngIf="showContent">
        <ng-content></ng-content>
      </ng-container>
    </div>
  `,
})
export class ChildComponent {
  @Input() showContent: boolean = false;
}

In this example:

  • The parent component conditionally provides content to the child component based on the value of the showContent property.
  • In the child component, <ng-container *ngIf="showContent"> is used to conditionally project content based on the provided condition.

Conclusion

Using ng-content in Angular components is a powerful way to create flexible and reusable components that can adapt to different content structures.

Whether you need to project content into a default slot or use selectors to target specific slots, ng-content enhances the composability and modularity of your Angular applications. Understanding how to effectively use ng-content allows you to build more dynamic and adaptable components within your Angular projects.

Similar Posts