The hostDirectives Property
Attach directives to a component host.
The hostDirectives Property is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
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.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “The hostDirectives Property” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “The hostDirectives Property”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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