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.