Angular Academy · Lesson

Exposing Inputs and Outputs

Surface host directive inputs and outputs.

Lesson 2 of 413 steps

Exposing Inputs and Outputs is a free Angular Academy lesson on CoddyKit. This is lesson 2 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.

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.

Answer it in the interactive lesson

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.

Free to start

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

Start learning free View the full course

Frequently Asked Questions

Is the “Exposing Inputs and Outputs” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Exposing Inputs and Outputs”, 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 “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, so you can start here or from the beginning and move at your own pace. This is lesson 2 of 4.

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

← Back to Angular Academy