The hostDirectives Property
Attach directives to a component host.
The hostDirectives Property is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Directive Composition API
The Directive Composition API lets a component or directive apply other directives to its own host element declaratively, via the hostDirectives property. This enables reuse without inheritance.
The Problem It Solves
Previously, to reuse directive behavior you either repeated the directive in every template or used inheritance. hostDirectives composes behaviors directly onto a host.
Basic Syntax
List directives in the hostDirectives array of the component metadata.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}What Happens
Angular applies CdkTrapFocus to every app-menu host element automatically. Consumers get the behavior for free, without adding the directive themselves.
Requirements
Host directives must be standalone. You reference the directive class directly, not its selector.
Multiple Host Directives
Compose several behaviors by listing them all.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Applying to a Directive
A directive can also have host directives, letting you build layered, composable behaviors.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Lifecycle Order
Host directives instantiate before the host's own constructor logic, so their setup is available when the host initializes.
Dependency Injection
Host directives can be injected into the host (and vice versa) via the element injector, enabling coordination between composed behaviors.
private trap = inject(CdkTrapFocus);No Template Changes
The key win: consumers of app-menu do not need to know about CdkTrapFocus. The behavior is encapsulated in the component definition.
When to Reach For It
Use hostDirectives to bundle cross-cutting behaviors (focus trap, ripple, analytics) into components or directives cleanly and reusably.
Quick Check
Test your understanding of hostDirectives.
Recap
You learned that the hostDirectives property applies standalone directives to a component or directive's host element automatically, enabling behavior reuse through composition without templates or inheritance.
Frequently asked questions
Is the “The hostDirectives Property” lesson free?
Yes — the full text of “The hostDirectives Property” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
What will I learn in “The hostDirectives Property”?
Attach directives to a component host. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The hostDirectives Property” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The hostDirectives Property
- Exposing Inputs and Outputs
- Building Reusable Behaviors
- Composition vs Inheritance