Projection places caller-supplied content in a component’s layout. The caller owns that content’s bindings, while the receiving component controls projection slots.
Before you start
You should understand a component’s class, template and dependencies. Follow both the framework lifecycle and the ownership of each value or resource. Apply examples inside an Angular application; the surrounding application configuration and imports depend on the feature being demonstrated.
The practical goal is to reason through this situation: A card projects a heading and body through selected ng-content slots. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Identify the content author
The caller declares projected nodes and their bindings. The card chooses where those nodes appear.
Step 2: Define projection slots
Use selectors that match the intended heading and body content. Unmatched content needs a deliberate default slot or omission policy.
Step 3: Choose the query boundary
Use content queries for projected children and view queries for nodes declared by the card’s own template.
Worked scenario
A card projects a heading and body through selected ng-content slots.
A caller passes a heading containing its own title binding into a card. Changing the caller’s title updates that projected heading; the card does not acquire ownership of the caller’s field. The card’s internal close button belongs to its view, so searching for it through a content query models the wrong boundary.
Common mistake
Treating projected nodes as if declared in the receiving template confuses query and lifecycle behavior.
Verify the behavior
Update the caller’s title, omit a slot and provide multiple matching nodes. Verify placement and query results for projected versus internal children.
Interview exercise
Choose content versus view queries.
Answer and reasoning
Use content queries for projected content and view queries for the component’s own template.
Continue learning
Compare the scenario with the Angular interview questions and test your understanding with the Angular MCQs. For terminology and implementation details, consult the reference material.