Composition vs Inheritance

To share behavior between components you can use inheritance (extend a base class) or composition (combine smaller pieces). Angular's composition API makes composition the preferred default.

With inheritance, a component extends a base component or directive and reuses its inputs, outputs, and logic.

A class can extend only one base. Deep hierarchies get rigid, and you inherit everything, even parts you do not want.

Combining multiple behaviors via inheritance is impossible without awkward chains. Composition sidesteps this by applying many directives independently.

With composition, a component stays focused and pulls in behaviors via hostDirectives, mixing as many as needed.

The guidance "favor composition over inheritance" applies strongly in Angular: composition is flexible, additive, and avoids fragile base classes.

Inheritance can be fine for a single, stable base shared by close variants, for example a base form-field that variants specialize. Keep hierarchies shallow.

You can combine approaches: extend a thin base for shared structure while composing behaviors for cross-cutting concerns.

Composition keeps each behavior's internals private and exposes only chosen inputs/outputs, whereas inheritance exposes the entire base API.

When a base class accumulates unrelated responsibilities, split each into a directive and compose them. The result is more modular and testable.

Need multiple independent behaviors? Compose. Need a single shared structural foundation? A shallow base may do. Default to composition for flexibility.

Test your understanding of composition vs inheritance.

You learned that composition (combining focused behaviors via hostDirectives) is more flexible than inheritance (a single base class), avoids fragile hierarchies, and should be the default, with shallow inheritance reserved for shared structure.