The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use <ng-content> in a component template to choose where a caller’s child content appears. For one insertion point, use a plain placeholder; for named areas such as a card title and body, add select attributes to multiple placeholders. The caller’s markup remains part of the parent’s view, even though the receiving component controls where it renders.
Project child content into a component
A component can act as a wrapper by placing a single <ng-content> placeholder in its template:
@Component({
selector: 'app-panel',
template: `
<section class="panel">
<ng-content />
</section>
`,
})
export class PanelComponent {}
A parent supplies the content between the component’s tags:
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11<app-panel>
<p>This paragraph is projected into the panel.</p>
</app-panel>
Angular renders the supplied paragraph where the placeholder appears. <ng-content> is a projection marker, not a component or a real DOM element; Angular processes it as part of building the component. See Angular’s content projection guide and ng-content API reference.
#1 Best Overall
Create named slots with select
Give each named slot a CSS selector using the placeholder’s select attribute. In this card, elements marked with card-title go in the heading, while the plain placeholder receives the remaining content:
@Component({
selector: 'app-card',
template: `
<article class="card">
<h2><ng-content select="[card-title]" /></h2>
<div class="card-body">
<ng-content />
</div>
</article>
`,
})
export class CardComponent {}
<app-card>
<h3 card-title>Account settings</h3>
<p>Update your contact information here.</p>
</app-card>
The title element matches [card-title], and the paragraph goes to the unselected placeholder. Angular’s selectors support CSS selector forms such as element names, attributes, classes, and :not(...). The Angular guide explains slot matching and unmatched content behavior.
Decide what happens to unmatched content
When a template has selected placeholders and one unselected placeholder, that unselected slot receives child elements that did not match a selected slot. If there is no unselected placeholder, unmatched child elements are not rendered in the component’s DOM. Make this choice deliberate: a typo in a caller’s selector or a missing slot can otherwise make content disappear.
Alias caller markup with ngProjectAs
If an element should match a slot but cannot use the slot’s selector directly, add ngProjectAs to give it a static selector alias:
Rank #3
<h3 ngProjectAs="[card-title]">Account settings</h3>
That heading can match select="[card-title]". The alias is static; it cannot be dynamically bound. See the content projection guide.
Provide fallback content for an empty slot
Put default markup inside a placeholder to show it when no caller content matches that slot:
<ng-content select="[card-title]">Untitled card</ng-content>
If the caller provides an element matching [card-title], that projected content is used; otherwise the fallback text appears. Fallback markup is useful when a component needs a sensible default without requiring every caller to provide that slot. Angular documents this behavior in its content projection guide.
Recommended Free Tools
Do not use ng-content as a runtime conditional
Angular processes projection placeholders at build time and creates projected DOM even when a placeholder is hidden. Wrapping <ng-content> in @if, @for, or @switch is therefore not a reliable way to conditionally create projected content. When content must be rendered conditionally, use the approach described in Angular’s template fragments guide.
When a control-flow block changes slot matching
Projection can also be affected when the parent puts slot content inside a control-flow block. Angular’s NG8011 diagnostic explains that the block’s root element is used to determine projection. If a block has multiple root nodes, an element intended for a named slot can end up in the default slot. The documented remedies are to place the content in an ng-container with a matching ngProjectAs alias, or to split the content into blocks that each have one projectable root.
Understand which component owns projected content
Projection changes where caller-supplied markup renders; it does not make that markup part of the receiving component’s own view. The parent remains the declaring context, so the parent’s change detection checks the projected nodes. The receiving component’s OnPush setting does not convert them into its own view.
Dependencies used by projected content resolve from the injector where that content was declared, not from the receiving component’s viewProviders. This matters when a projected template relies on a service or other dependency that the receiving component provides only to its own view. Angular covers these ownership details in the content projection guide.
Free tools Windows power users keep installed
One-click scans. No signup required.
Check library components that manage their children
Some component libraries use content queries to configure children—for example, to manage keyboard navigation, focus, or accessibility attributes in menus, tabs, and lists. Projecting those children through an extra wrapper may disrupt the library’s assumptions, even if a query appears to find the items. Before wrapping or rearranging managed children, follow the component library’s own guidance.
Supply projected content to a dynamically created component
Ordinary projection uses markup in a parent’s template. If you create the receiving component dynamically with NgComponentOutlet, Angular’s programmatic rendering guide describes ngComponentOutletContent for supplying projected content. Its example builds an array of projection slots from template fragments; use this distinct pattern when the component itself is created dynamically.
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.
