ng-content for slot-based composition in Angular - Mini Project: Build & Apply

Using <code>ng-content</code> for Slot-Based Composition in Angular

📖 Scenario: You are building a reusable Angular card component that can display different content in specific areas like header, body, and footer. This helps you reuse the card layout but show different content inside it.

🎯 Goal: Create an Angular component called app-card that uses ng-content with named slots to allow inserting custom header, body, and footer content from the parent component.

📋 What You'll Learn

Create an Angular component app-card with a template using ng-content and named slots

Use select attributes on ng-content to define slots for header, body, and footer

In the parent component template, use app-card and provide content for each slot using elements with matching selectors

Ensure the card layout uses semantic HTML and is accessible

💡 Why This Matters

🌍 Real World

Slot-based composition with <code>ng-content</code> is common in Angular to build flexible, reusable UI components like cards, modals, and tabs that accept custom content from their parents.

💼 Career

Understanding <code>ng-content</code> and slot-based content projection is essential for Angular developers to create maintainable and reusable component libraries in professional projects.

1

Create the app-card component template with basic structure

Create the app-card.component.html file with a section element containing three div elements with classes card-header, card-body, and card-footer. Inside each div, add an ng-content tag without any select attribute.

Angular

Hint

Use <ng-content> inside each div to mark where content will be inserted.

2

Add named slots to ng-content using select attributes

Modify the app-card.component.html so that the ng-content inside card-header has select="[card-header]", inside card-body has select="[card-body]", and inside card-footer has select="[card-footer]".

Angular

Hint

Use the select attribute on ng-content to define named slots matching attribute selectors.

3

Use app-card in parent template with slot content

In the parent component template, add an <app-card> element. Inside it, add three elements: a header with attribute card-header containing the text My Card Title, a p with attribute card-body containing This is the card body content., and a footer with attribute card-footer containing Footer info here..

Angular

Hint

Use elements with attributes matching the select values in app-card to fill slots.

4

Add basic CSS for card layout and accessibility

Add CSS styles to the app-card.component.css file to give the card a border, some padding, and spacing between header, body, and footer. Use semantic HTML roles if needed for accessibility.

Angular

/* Add CSS styles for .card, .card-header, .card-body, and .card-footer here */

/* Example: border, padding, margin */

Hint

Add CSS rules for the card container and its parts to improve visual layout and clarity.

Practice

1. What is the main purpose of ng-content in Angular components?

easy

A. To define component styles

B. To insert external content inside a component's template

C. To handle component events

D. To create services for dependency injection

Solution

1. Step 1: Understand ng-content role

   ng-content is used to project or insert external HTML content into a component's template.

2. Step 2: Differentiate from other features

   It does not define styles, handle events, or create services; those are unrelated to content projection.

3. Final Answer:

   To insert external content inside a component's template -> Option B

4. Quick Check:

   Content projection = Insert external content [OK]

Hint: Remember: ng-content projects external HTML inside components [OK]

Common Mistakes:

• Confusing ng-content with event handling
• Thinking ng-content styles components
• Mixing ng-content with service creation

2. Which syntax correctly creates a named slot using ng-content in Angular?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct attribute for named slots

   Angular uses the select attribute on ng-content to create named slots by CSS selectors.

2. Step 2: Check each option

   Only uses select with a CSS class selector, which is correct syntax.

3. Final Answer:

   <ng-content select=".header"></ng-content> -> Option A

4. Quick Check:

   Named slot uses select attribute [OK]

Hint: Use select="CSS-selector" for named ng-content slots [OK]

Common Mistakes:

• Using name or slot attributes which Angular does not support
• Confusing with Web Components slot attribute
• Using id attribute instead of select

3. Given this component template:

<div>
  <ng-content select=".title"></ng-content>
  <ng-content select=".body"></ng-content>
</div>

And usage:

<my-comp>
  <h1 class="title">Hello</h1>
  <p class="body">Welcome!</p>
</my-comp>

What will be rendered inside <my-comp>?

medium

A.

B. Welcome!Hello

C. HelloWelcome!

D. HelloWelcome!

Solution

1. Step 1: Match content with selectors

   The ng-content select=".title" inserts elements with class title, and select=".body" inserts elements with class body.

2. Step 2: Check order of insertion

   The template places .title content first, then .body content, so the output matches that order.

3. Final Answer:

   <div><h1 class="title">Hello</h1><p class="body">Welcome!</p></div> -> Option D

4. Quick Check:

   Content order follows ng-content slots [OK]

Hint: Content projects in order of ng-content slots matching selectors [OK]

Common Mistakes:

• Assuming order depends on usage, not template
• Ignoring CSS class selectors in select
• Expecting content without classes to appear

4. What is wrong with this component template?

<div>
  <ng-content select="header"></ng-content>
  <ng-content select=".body"></ng-content>
</div>

Usage:

<my-comp>
  <div class="header">Top</div>
  <div class="body">Content</div>
</my-comp>

medium

A. The usage classes do not match the template selectors

B. The select attribute cannot use class selectors

C. The selector 'header' misses the dot for class, so no content projects there

D. ng-content must have a closing tag with content inside

Solution

1. Step 1: Analyze the select attribute usage

   The first ng-content uses select="header", which looks for elements named <header>, not class header.

2. Step 2: Compare with usage classes

   The usage provides <div class="header">, which does not match the selector header (element selector). It should be .header to match the class.

3. Final Answer:

   The selector 'header' misses the dot for class, so no content projects there -> Option C

4. Quick Check:

   Class selectors need dot prefix in select [OK]

Hint: Class selectors in select need a dot prefix (e.g., .header) [OK]

Common Mistakes:

• Using element name instead of class selector
• Thinking select cannot use class selectors
• Forgetting ng-content can be self-closing

5. You want to create a reusable card component with three slots: header, content, and footer. Which template correctly uses ng-content to support this slot-based composition?

hard

A.

B.

C.

D.

Solution

1. Step 1: Identify correct attribute for named slots

   Angular uses select with CSS selectors to define named slots in ng-content.

2. Step 2: Check each option's syntax

   uses select with class selectors, matching Angular's pattern. Options B, C, and D use invalid selectors or attributes (name, slot) not supported by Angular.

3. Step 3: Confirm semantic HTML usage

   wraps slots in semantic elements (header, section, footer), improving accessibility and structure.

4. Final Answer:

   Option A's template correctly uses ng-content with select and semantic tags -> Option A

5. Quick Check:

   Use select with CSS classes for slots + semantic tags [OK]

Hint: Use select='.class' for slots and wrap with semantic tags [OK]

Common Mistakes:

• Using name or slot attributes instead of select
• Not using CSS selectors in select
• Ignoring semantic HTML for accessibility