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
Angular applications are assembled as trees of components: a parent renders child components through their selectors, while other composition tools let it accept caller-provided markup, share services, or add behavior to its host. Choose the mechanism that matches what you are composing—UI, content, dependencies, or behavior.
What does component composition mean in Angular?
Angular describes a component as “the fundamental building block for creating applications.” A component combines a TypeScript class, an HTML template, and a CSS selector, with its configuration supplied through the @Component decorator. The template determines the rendered view, the selector identifies how the component is used, and the class provides its behavior. Together, components organize an interface into units that can be maintained and extended separately. See Angular’s Components essentials and component guide.
Composition usually starts with a parent template that includes a child component’s selector. Angular creates the child instance when it encounters that selector and renders the child’s view inside the resulting host element. Repeating this pattern builds the component tree that makes up an application.
How do you use a child component?
In current Angular, components are standalone by default, so a parent can make a child component available by listing it in the parent’s imports array. Then use the child’s selector in the parent template:
#1 Best Overall
import { Component } from '@angular/core';
import { ProfilePhoto } from './profile-photo';
@Component({
selector: 'user-profile',
imports: [ProfilePhoto],
template: `
<h1>User profile</h1>
<profile-photo />
`,
})
export class UserProfile {}The example assumes ProfilePhoto is a standalone component. Angular’s current guide identifies Angular 19 as the default-change boundary: before Angular 19, standalone defaulted to false. For a non-standalone component, make it available through the NgModule that declares it rather than importing it directly as a standalone child. Check the documentation for the Angular release used by your project. See the component guide and Component API.
A parent-child template relationship does not mean every interaction must go through a service. Inputs and outputs define the child’s data and event surface: inputs let the parent provide data, and outputs let the child communicate events. Treat them as part of the component’s explicit API.
Which composition technique fits the need?
| What you need | Angular mechanism | How it fits |
|---|---|---|
| Render a reusable UI unit inside another component | Child component selector and imports |
The parent imports the child and uses its selector in the template. |
| Let callers supply markup to a wrapper, such as a card | Content projection with <ng-content> |
The receiving component chooses where caller-provided children appear. |
| Supply reusable services or values scoped to part of the tree | Dependency injection and providers | The component requests dependencies; providers determine which instances are available in its injector hierarchy. |
| Apply reusable behavior to a component’s host | Directive composition with hostDirectives |
The component composes host directives at compile time and can expose selected inputs and outputs. |
When should you use content projection?
Use content projection when a wrapper should control the placement of markup supplied by its caller. The wrapper places an <ng-content> placeholder where that content should render. Multiple placeholders can route different pieces of supplied content by CSS selector. <ng-content> is a compile-time placeholder, not an ordinary component or DOM element. See Angular’s content projection guide.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Projected content remains part of the declaring parent’s view even when it appears inside the receiving component. Angular checks it with the parent, and it receives dependencies from the parent’s injector—not from the receiving component’s viewProviders. Consequently, setting OnPush on the wrapper does not by itself suppress checks for projected content.
Rank #3
- Do not conditionally include
<ng-content>to avoid creating its content. Angular instantiates projected content even when the placeholder is hidden. - Check a library component’s guidance before projecting children into controls that manage keyboard navigation, focus, or ARIA behavior. Some such components may not support externally projected children reliably.
When should you use dependency injection?
Use dependency injection to supply a component with a service or value instead of having the component create it itself. This is different from rendering a child in a template: dependency injection provides dependencies to classes, while selectors and projection compose views.
Providers can be scoped to a component, making an instance available within that component’s subtree. Angular starts resolving a requested dependency from the requesting component’s injector and searches upward through the injector hierarchy for a provider. That hierarchy follows the component tree, so a subtree can use a scoped instance or override a provider from above. See Angular’s dependency injection guide and hierarchical dependency injection guide.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When should you use host directives?
Use the directive composition API when a component should apply reusable directive behavior to its own host. A component declares host directives with hostDirectives; Angular applies them statically at compile time, so this is not a way to add directives dynamically at runtime.
Free tools Windows power users keep installed
One-click scans. No signup required.
A host directive’s inputs and outputs are not exposed through the component by default. To make them part of the component’s public API, explicitly expose the ones consumers need, optionally using aliases. This lets the component offer a deliberate interface instead of automatically surfacing every directive detail. See Angular’s directive composition API guide.
How to choose without mixing responsibilities
- Choose a child component when the parent needs to render a reusable UI unit.
- Choose content projection when callers need to provide markup and the wrapper needs to place it.
- Choose dependency injection when a class needs a service or a value, especially when provider scope matters.
- Choose host directives when a component should compose behavior onto its own host, with only selected directive inputs and outputs exposed.
These mechanisms can coexist, but they solve different problems. Make the template relationship explicit with selectors, keep data and event communication in the component API, and use providers or host directives for their respective dependency and behavior concerns.
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.
