Exposing Inputs and Outputs
Surface host directive inputs and outputs.
Exposing Inputs and Outputs is a free Angular Academy lesson on CoddyKit — lesson 2 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.
Exposing Composed APIs
When you compose a directive via hostDirectives, its inputs and outputs are hidden by default. The composition API lets you expose selected inputs and outputs to the host's public API.
The Object Form
Instead of listing just the class, use an object with directive, inputs, and outputs arrays.
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]Exposing an Input
Listing an input name in inputs makes it bindable on the host element by consumers.
<app-button tooltipText="Save changes"></app-button>Exposing an Output
Listing an output makes the host re-emit that directive's events.
<app-button (tooltipShown)="onShown()"></app-button>Renaming on Exposure
Use the publicName: internalName form to rename an input or output as you expose it.
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."Renaming Outputs
Outputs rename the same way.
outputs: ['tooltipShown: shown']
// template: (shown)="..."Why Hide by Default?
Hiding composed inputs/outputs keeps the host's API intentional. You expose only what makes sense for consumers, avoiding leaking internal directive details.
Combining with Own Inputs
The host can have its own inputs alongside exposed ones; Angular merges them into a single public API on the element.
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}Name Collisions
If an exposed input name collides with the host's own input, renaming avoids the conflict and clarifies intent.
Two-Way Bindings
To support a two-way binding through composition, expose both the input and its matching Change output with consistent names.
Best Practice
Expose the minimal, well-named surface consumers need. Rename internal names to fit your component's vocabulary, not the underlying directive's.
Quick Check
Test your understanding of exposing inputs/outputs.
Recap
You learned that the object form of hostDirectives exposes selected inputs and outputs to the host's API, with optional publicName: internalName renaming, keeping the public surface intentional.
Frequently asked questions
Is the “Exposing Inputs and Outputs” lesson free?
Yes — the full text of “Exposing Inputs and Outputs” 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 “Exposing Inputs and Outputs”?
Surface host directive inputs and outputs. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Exposing Inputs and Outputs” 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