What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Angular content projection lets a reusable component place markup supplied by its parent into chosen locations in the component template. A plain <ng-content> creates a default slot; add select when the component needs named locations. The important boundary is ownership: projected markup remains the parent’s content, even when it appears inside the receiving component.
How a default ng-content slot works
<ng-content> is a compile-time placeholder, not a DOM element or Angular component. Angular compiles it as the insertion location for child content supplied on the receiving component’s host. For example, the reusable component can provide a frame:
As an Amazon Associate I earn from qualifying purchases.
<section class="notice">
<ng-content></ng-content>
</section>A parent then supplies the content:
<app-notice>
Your changes have been saved.
</app-notice>The supplied text is projected into the placeholder location. The component controls the surrounding structure; the parent supplies the inner markup. See Angular’s content projection guide.
Recommended Free Tools
How to route content into multiple ng-content slots
Use select to match child elements to specific locations. Angular’s API reference supports tag-name, attribute, CSS-class, and :not selectors.
#1 Best Overall
<section class="card">
<ng-content select="card-title">Untitled</ng-content>
<div class="divider"></div>
<ng-content select="card-body">No body provided.</ng-content>
</section>The parent supplies elements that match those selectors:
<custom-card>
<card-title>Account</card-title>
<card-body>Settings and profile</card-body>
</custom-card>Angular places each matching element in its corresponding slot. If some children should go wherever they are not specifically matched, include one unselected <ng-content> as a default slot. Without a default slot, unmatched children are not rendered into the component’s DOM. See the ng-content API reference.
What fallback content and ngProjectAs do
Content written inside a slot is fallback content. Angular uses it when no supplied child matches that slot. For example, the card above displays “Untitled” if the caller does not provide a matching card-title.
When the parent’s element has a different tag but should match a slot, use ngProjectAs to provide a static selector alias:
Rank #3
<custom-card>
<h3 ngProjectAs="card-title">Account</h3>
<card-body>Settings and profile</card-body>
</custom-card>The heading is treated as matching card-title for projection. The alias is static; it cannot be dynamically bound. The Angular API reference documents selector matching, fallback, and aliases.
When content projection is the right choice
Choose the implementation based on whether the receiving component needs fixed layout slots, conditional creation, runtime-selected component types, or active management of its children.
| Need | Approach | Key constraint |
|---|---|---|
| Place ordinary parent markup in one location | One default <ng-content> |
All supplied content goes to that location. |
| Route child elements to defined locations | Multiple <ng-content select="…"> slots |
Unmatched content needs an unselected default slot or it is not rendered. |
| Render supplied content only under a runtime condition | Template fragments | Do not make an <ng-content> placeholder conditional. |
| Choose a component at runtime and supply its content | Angular’s programmatic rendering APIs, such as ngComponentOutletContent |
Hydration does not support projectable nodes created through native DOM APIs. |
| Manage projected children for focus, keyboard navigation, or ARIA behavior | Use the library component’s documented child-management pattern | Arbitrary wrapper layers may not work with components that query and manage their children. |
For dynamic components, Angular documents passing content through programmatic rendering. Its hydration error reference notes that native-DOM-created projectable nodes are unsupported and mentions ngSkipHydration as a possible workaround: NG0503.
Why projected content should not be wrapped in control flow
Do not put <ng-content> inside @if, @for, or @switch to try to create or destroy projected content conditionally. Angular processes the placeholder at build time and creates projected nodes even when the placeholder is hidden. Use template fragments when the content itself must be conditionally rendered. Angular explains this limitation in its content projection guide.
There is a separate matching pitfall when a control-flow block has multiple root nodes: Angular may not match the intended child to a selected slot. The NG8011 error reference recommends putting ngProjectAs on a single-root ng-container, or splitting the content across blocks so each has one projectable root.
Who owns projected content—and what that means
Projection changes where parent-supplied markup appears, not who owns it. Angular checks projected content with the declaring parent, and dependencies used by that content resolve from the parent’s injector context. The receiving component’s viewProviders are not visible to projected content. This follows Angular’s content projection and hierarchical dependency injection guidance.
Also, <ng-content> is compile-time syntax rather than a runtime element. It is not a DOM node on which to attach directives, styling, or arbitrary attributes. Put layout and styling on real elements around the placeholder, and apply behavior to the projected elements where they are declared.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Testing projected content in component harnesses
If a test needs to find a component harness inside supplied child content, scope the harness loader to the projected-content container. Angular’s component harness guide describes using a loader rooted at that container so searches are limited to the relevant projected subtree.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
