The Angular Ivy runtime introduces a new concept called component features. Component features are mixins for components. They add, remove or modify traits at runtime.

Playful Programming

Angular Ivy introduces an internal concept called component features — runtime mixins that add, remove, or modify component traits without relying on inheritance or custom decorators. These features are applied to component definitions (the static metadata object on component classes) and are tree-shakable by design. While not yet part of Angular's public API as of version 9, the post explains their structure, shows how to implement a custom `withUsername` feature using NgRx Store, and provides a workaround class decorator (`componentFeatures`) that lets developers use them today via experimental internal APIs. The post also covers component feature factories for parameterization, directive features, and the 'host features paradox' around `renderComponent`. Use cases include route parameters, state management integration, observable lifecycle events, and replacing container components.

Component features with Angular Ivy

Component mixins without inheritance or decorators Copy link Link copied!

Why are we still waiting? Copy link Link copied!

The structure of component features Copy link Link copied!

Component definitions Copy link Link copied!

The username component feature Copy link Link copied!

Applying component features Copy link Link copied!

Adding options to component features Copy link Link copied!

The host features paradox Copy link Link copied!

Directive features Copy link Link copied!