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.