Content Projection with ng-content in Angular

Build truly reusable and flexible UIs by projecting content from a parent component directly into a child's template.

Welcome! Let's learn how to build super flexible components in Angular.

/* Starting the journey into flexible components... */

What is Content Projection?

Content Projection is a powerful Angular feature that lets you create flexible, reusable components. The idea is to make a component with a placeholder, and then allow another component (the parent) to "project" its own HTML content into that placeholder. The core of this mechanism is the <ng-content> element.

Projecting Content from a Parent

Imagine you have a generic <app-card> component. Instead of hard-coding its content, you can use it like a standard HTML tag and place your desired content directly inside it. This content from the parent is what will be projected.

Multi-Slot Projection with `select`

What if your component needs multiple placeholders, like a header, body, and footer? The select attribute on <ng-content> allows you to create specific "slots". You can select content based on a CSS selector like a tag name (select="h1"), a class (select=".card-footer"), or an attribute (select="[card-header]").

The Result: A Flexible Component Library

By mastering <ng-content>, you move from building static, single-purpose components to creating a flexible UI library. This pattern is fundamental for creating shareable wrappers, layouts, and data display components that adapt to any context.

Practice Zone

Interactive Test 1: Match the Concept

Match the <ng-content> syntax to its correct purpose.

Arrastra en el orden correspondiente.

Arrastra las opciones:

<ng-content select=".card-title" />

<ng-content select='[card-footer]' />

<ng-content />

Completa el código:

Default Content______

Slot for a specific CSS class______

Slot for a specific attribute______

Unlock with Premium

Interactive Test 2: Complete the Code

Rellena los huecos en cada casilla.

// child-card.component.ts
@Component({
  selector: 'app-child-card',
  template: `
    <div class="card">
      <div class="header">
        
      </div>
      <div class="body">
        
      </div>
    </div>
  `
})

// parent.component.ts
@Component({
  template: `
    <app-child-card>
      <h1 class="header">My Title</h1>
      <p>This is the main content.</p>
    </app-child-card>
  `
})

Unlock with Premium

Practice Example: Code Editor

Create a parent component that projects a header with a `header-content` class and a footer with a `footer-content` class into a child component that uses `ng-content` with the `select` attribute to place them correctly.

Enunciado:

This example demonstrates multi-slot content projection. The child component defines three slots: one for content with the .header-content class, one for .footer-content, and a default slot for any content that doesn't match the others. The parent provides content for all three slots.

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child>
      <h2 class="header-content">Projected Header</h2>
      <p>This is the main projected content.</p>
      <div class="footer-content">Projected Footer</div>
    </app-child>
  `
})
export class ParentComponent {}

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <header>
      <ng-content select=".header-content"></ng-content>
    </header>
    <main>
      <ng-content></ng-content>
    </main>
    <footer>
      <ng-content select=".footer-content"></ng-content>
    </footer>
  `
})
export class ChildComponent {}

Unlock with Premium

Knowledge Check

Which tag is used to project content into an Angular component?

Unlock with Premium

Content Projection in Action

Content projection is a cornerstone of building a scalable and maintainable component architecture in Angular. Here are some common, powerful use cases.

1. The Generic Card Component

This is the classic example. You create a card with styling and structure, but leave the content areas open with <ng-content>. This allows any other component to use your card component to display anything from user profiles to product information, ensuring a consistent look and feel.

// usage in parent.component.html
<app-card>
  <h2 class="card-title">User Profile</h2>
  <p>Details about the user...</p>
</app-card>

User Profile

Details about the user...

2. Building a Modal/Dialog Wrapper

Modals often have a consistent frame (overlay, close button, header/footer areas) but highly dynamic body content. Content projection is perfect for this. Your `ModalComponent` handles the logic of showing/hiding, while the parent component simply projects the form, confirmation message, or data that needs to be displayed inside.

// modal-wrapper.component.html
<div class="modal-header">
  <ng-content select="[modal-title]"></ng-content>
</div>
<div class="modal-body">
  <ng-content></ng-content>
</div>

Modal Dialog UI

3. Creating Layout Components

For more complex page structures, you can build layout components like `two-column-layout` or `sidebar-layout`. These components define the CSS grid or flexbox structure and provide named slots using `select` for the parent to project content into, such as a sidebar, main content area, or header.

<app-sidebar-layout>
  <div nav-area>...Navigation Links</div>
  <div main-content>...Page Content</div>
</app-sidebar-layout>

Nav

Main Content

Practical Takeaway: Stop copying and pasting HTML structures. If you find yourself building similar-looking components with different inner content, it's a perfect opportunity to refactor and use a single, flexible component with `<ng-content>`.

Content Projection Glossary

Content Projection: The mechanism in Angular for passing HTML content from a parent component's template into a specified location in a child component's template.
<ng-content>: The core element used in a child component's template to mark the spot where projected content should be inserted. It acts as a placeholder.
select Attribute: An attribute used on the `<ng-content>` element to specify which content should be projected into that particular slot. It uses CSS selectors (e.g., `select=".my-class"`, `select="[my-attribute]"`).
Single-slot Projection: The most basic form of content projection, using a single `<ng-content>` without a `select` attribute. It projects all content from the parent into one place.
Multi-slot Projection: A more advanced pattern where a component has multiple `<ng-content>` elements, each with a different `select` attribute. This allows the parent to project different pieces of content into different, specific slots.