ng-content for slot-based composition in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does ng-content with select attribute work?

Given this Angular component template:

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

And this usage:

<app-panel>
  <div class="header">Title</div>
  <div class="body">Content</div>
  <div class="footer">Footer</div>
</app-panel>

What will be rendered inside app-panel?

A Only the 'header' div will be rendered; 'body' and 'footer' will be ignored.

B All three divs ('header', 'body', and 'footer') will be rendered in the order they appear.

C None of the divs will be rendered because 'footer' does not have a matching select.

D Only the elements with classes 'header' and 'body' will be rendered in their respective slots; the 'footer' div will not appear.

💡 Hint

Think about how ng-content with select filters projected content.

The ng-content elements with select attributes only project matching elements from the content. Elements without a matching selector, like the 'footer' div, are not rendered.

📝 Syntax

intermediate

Identify the correct syntax for multiple ng-content slots

Which of the following Angular component templates correctly defines two named slots using ng-content with attribute selectors?

A

<ng-content name="header"></ng-content>
<ng-content name="footer"></ng-content>

B

<ng-content select="[slot='header']"></ng-content>
<ng-content select="[slot='footer']"></ng-content>

C

<ng-content slot="header"></ng-content>
<ng-content slot="footer"></ng-content>

D

<ng-content select=".header"></ng-content>
<ng-content select=".footer"></ng-content>

💡 Hint

Angular uses CSS selectors in the select attribute to match projected content.

Angular uses the select attribute with CSS selectors to define slots. Attributes like [slot='header'] are valid selectors. The name or slot attributes on ng-content are not valid in Angular.

🔧 Debug

advanced

Why does projected content not appear in the expected slot?

You have this component template:

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

And you use it like this:

<app-card>
  <h1 class="title">Hello</h1>
  <p>Paragraph</p>
</app-card>

But the h1 appears together with the paragraph in the second slot; the first slot is empty. What is the most likely cause?

A The <code>h1</code> element has a typo in the class name that does not match '.title'.

B The <code>ng-content</code> with <code>select</code> must come after the default <code>ng-content</code> to work.

C Angular does not support multiple <code>ng-content</code> elements in one component.

D The <code>h1</code> element is not a valid child for <code>ng-content</code> projection.

💡 Hint

Check the class names carefully for exact matches.

If the class name on the element does not exactly match the selector in ng-content, it will not be projected into that slot. The default ng-content projects all unmatched content.

❓ state_output

advanced

What is the rendered output with nested ng-content?

Consider these two components:

// child.component.html
<div class="child">
  <ng-content select=".slot1"></ng-content>
  <ng-content></ng-content>
</div>

// parent.component.html
<app-child>
  <div class="slot1">First</div>
  <div>Second</div>
</app-child>

What will be the final rendered HTML inside app-child?

A &lt;div class=&quot;child&quot;&gt;&lt;div&gt;Second&lt;/div&gt;&lt;div class=&quot;slot1&quot;&gt;First&lt;/div&gt;&lt;/div&gt;

B &lt;div class=&quot;child&quot;&gt;&lt;div&gt;Second&lt;/div&gt;&lt;/div&gt;

C &lt;div class=&quot;child&quot;&gt;&lt;div class=&quot;slot1&quot;&gt;First&lt;/div&gt;&lt;div&gt;Second&lt;/div&gt;&lt;/div&gt;

D &lt;div class=&quot;child&quot;&gt;&lt;div class=&quot;slot1&quot;&gt;First&lt;/div&gt;&lt;/div&gt;

💡 Hint

Remember the order of ng-content elements and how selectors filter content.

The first ng-content projects elements with class 'slot1'. The second projects all remaining elements. So both divs appear inside the child container in the order of the ng-content tags.

🧠 Conceptual

expert

Why use ng-content with selectors instead of multiple inputs?

Which is the best explanation for why Angular developers use ng-content with select attributes for slot-based composition instead of passing multiple inputs to a component?

A <p>It allows the parent component to pass complex HTML or components directly, preserving structure and styles, which inputs cannot do.</p>

B <p>It improves performance by avoiding change detection on inputs.</p>

C <p>It simplifies the component code by removing the need for any inputs or outputs.</p>

D <p>It automatically binds data from the parent to the child without any extra code.</p>

💡 Hint

Think about what inputs can and cannot pass compared to content projection.

ng-content with selectors lets you pass rich content like HTML or other components, keeping their structure and styles intact. Inputs are for data, not for passing templates or markup.

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