ng-content for slot-based composition in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to insert default content using .

Angular

<div>
  <ng-content [1]></ng-content>
</div>

Drag options to blanks, or click blank then click option'

Aselect="header"

Bselect

Cdefault

Dslot

Attempts:

3 left

💡 Hint

Common Mistakes

Adding a select attribute when default content is needed

Using 'slot' attribute which is not valid in Angular

The tag without a select attribute acts as the default slot for content projection.

2fill in blank

medium

Complete the code to project content into a named slot called 'header'.

Angular

<ng-content [1]></ng-content>

Drag options to blanks, or click blank then click option'

Aslot="header"

Bid="header"

Cname="header"

Dselect="header"

Attempts:

3 left

💡 Hint

Common Mistakes

Using slot attribute which is not recognized by Angular

Using name or id attributes which do not work for content projection

Use the select attribute with the CSS selector to project content into the named slot 'header'.

3fill in blank

hard

Fix the error in the content projection selector to match elements with attribute 'footer'.

Angular

<ng-content [1]></ng-content>

Drag options to blanks, or click blank then click option'

Aselect="footer"

Bselect="[footer]"

Cselect=".footer"

Dselect="#footer"

Attempts:

3 left

💡 Hint

Common Mistakes

Using select="footer" which selects elements named footer, not attributes

Using class or id selectors which do not match attribute selectors

To select elements with an attribute 'footer', use the attribute selector syntax [footer].

4fill in blank

hard

Complete the code to project content with attribute 'sidebar' and default content fallback.

Angular

<ng-content [1]></ng-content>
<ng-content ></ng-content>

Drag options to blanks, or click blank then click option'

Aselect="[sidebar]"

Bselect="default"

Dselect="*"

Attempts:

3 left

💡 Hint

Common Mistakes

Using select="default" which is not a valid selector

Adding select attribute to default content projection

The first projects content with attribute 'sidebar'. The second without select projects default content.

5fill in blank

hard

Fill both blanks to project content for 'header', 'footer', and default slots.

Angular

<ng-content [1]></ng-content>
<ng-content [2]></ng-content>
<ng-content ></ng-content>

Drag options to blanks, or click blank then click option'

Aselect="header"

Bselect="footer"

Dselect="main"

Attempts:

3 left

💡 Hint

Common Mistakes

Using select attribute for default slot

Mixing up slot names or selectors

Use select="header" and select="footer" for named slots, and no select for default slot.