How do content projection and Angular queries differ?

Separates projected caller-owned content from a component's own view and explains when queries are justified.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

Content projection lets a component render content supplied by its caller through ng-content. A view query looks inside the component's own template, while a content query looks at projected descendants. I prefer normal inputs and outputs for data flow and use a query only when the component must coordinate with a rendered child, directive, template, or element.

Full answer below

Practice focus

Content projection, view queries, content queries, ownership, lifecycle, and component APIs.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
Projection decides where caller-owned content renders; queries obtain references inside a specific ownership boundary.
Content projection lets a component render content supplied by its caller through ng-content. A view query looks inside the component's own template, while a content query looks at projected descendants. I prefer normal inputs and outputs for data flow and use a query only when the component must coordinate with a rendered child, directive, template, or element.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
A card can project a header and body without knowing their data, while a tabs component may query projected tab directives to coordinate selection. Query results depend on when the relevant view or content exists, especially around conditional rendering, so signal queries can make that availability explicit. I avoid using a broad descendant query as a service locator because it couples the component to an internal tree shape. Direct DOM access is reserved for behavior the template cannot express cleanly.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Confusing projected content with nodes declared in the component's own template.
Using queries as a general replacement for inputs and outputs.
Assuming a conditional query result is always available.

How do content projection and Angular queries differ?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Related drill

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?