Angular Academy · Lesson

Building Reusable Behaviors

Package behavior as composable directives.

Lesson 3 of 413 steps

Building Reusable Behaviors is a free Angular Academy lesson on CoddyKit. This is lesson 3 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.

Behaviors as Building Blocks

The composition API shines when you design small, focused directives, each encapsulating one behavior, then compose them onto components as needed.

A Single-Purpose Directive

Keep each behavior tiny and standalone.

@Directive({
  selector: '[appElevate]'
})
export class ElevateDirective {
  @HostBinding('style.boxShadow')
  shadow = '0 2px 8px rgba(0,0,0,.15)';
}

A Hover Behavior

Another behavior listens for hover and toggles a class.

@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
  @HostBinding('class.is-hover') hovering = false;
  @HostListener('mouseenter') on() { this.hovering = true; }
  @HostListener('mouseleave') off() { this.hovering = false; }
}

Composing Behaviors

A card component composes both behaviors with no template wiring.

@Component({
  selector: 'app-card',
  hostDirectives: [ElevateDirective, HoverClassDirective],
  template: '<ng-content></ng-content>'
})
export class CardComponent {}

Reuse Across Components

The same behaviors can be composed onto buttons, tiles, or panels. Define once, reuse everywhere, no duplication.

Configurable Behaviors

Add inputs to make a behavior tunable, then expose them where composed.

@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
  level = input(1);
}

Exposing the Knob

Expose the configurable input so each host can set it.

hostDirectives: [{
  directive: ElevateDirective,
  inputs: ['level']
}]

Coordinating Behaviors

Behaviors can inject each other through the element injector to coordinate, for example a ripple reacting to a pressed state.

Testability

Small behaviors are easy to unit test in isolation, then trusted when composed, improving overall reliability.

Naming Conventions

Name behaviors after what they do (appElevate, appHoverClass, appAutofocus). Clear names make composition self-documenting.

A Behavior Library

Over time you build a library of composable behaviors that any component can opt into, dramatically reducing repeated host logic.

Quick Check

Test your understanding of reusable behaviors.

Answer it in the interactive lesson

Recap

You learned to design small standalone directives that each encapsulate one behavior, compose them with hostDirectives, expose tunable inputs, and build a reusable, testable behavior library.

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 “Building Reusable Behaviors” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Building Reusable Behaviors”, 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 “Building Reusable Behaviors”?

Package behavior as composable directives. 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 3 of 4.

How long does the “Building Reusable Behaviors” 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