ng-content for slot-based composition in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is ng-content used for in Angular?

ng-content is used to project content from a parent component into a child component. It allows you to insert custom content inside a component's template, enabling flexible and reusable UI parts.

intermediate

How does slot-based composition work with ng-content?

Slot-based composition uses multiple ng-content tags with select attributes to project different parts of the parent's content into specific places in the child component's template.

intermediate

What does the select attribute do in ng-content?

The select attribute filters which elements from the parent content should be projected into that specific ng-content slot, based on CSS selectors like tags, classes, or attributes.

beginner

Can you have multiple ng-content tags in one component template?

Yes, you can have multiple ng-content tags to create slots. Each slot can receive different parts of the parent's content, making the component more flexible.

intermediate

What happens if no content matches a select attribute in ng-content?

If no content matches the select attribute, that ng-content slot remains empty and nothing is projected there.

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

A To project content from parent to child components

B To style components dynamically

C To handle component events

D To fetch data from APIs

ng-content allows content projection, letting parent components insert content into child components.

How do you target specific content for projection in ng-content?

A Using <code>@Input</code> properties

B Using <code>ngIf</code> directives

C Using event bindings

D Using the <code>select</code> attribute with CSS selectors

The select attribute filters content by CSS selectors for slot-based projection.

What happens if you have multiple ng-content tags without select attributes?

A Only the first <code>ng-content</code> projects all content; others stay empty

B All <code>ng-content</code> tags project the same content

C Angular throws an error

D Content is duplicated in all slots

Without select, only the first ng-content projects all content; others remain empty.

Which of these is a valid CSS selector for select in ng-content?

A .header

B All of the above

C button

D #main-content

The select attribute accepts any valid CSS selector like classes, IDs, or tags.

Why use slot-based composition with ng-content?

A To handle user input events

B To improve component styling

C To organize projected content into named areas

D To fetch data asynchronously

Slot-based composition organizes content into named slots for flexible UI design.

Explain how ng-content enables slot-based composition in Angular components.

Think about how you can insert different parts of content into different places inside a child component.

Describe what happens when no content matches a select attribute in an ng-content slot.

Consider what Angular does if it can't find matching content for a slot.

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