Angular Composition API

Composition model for functional reactive Angular applications.

Features

• Small bundle size (4kb min gzipped)
• Minimal API
• Granular change detection
• Better-than OnPush performance
• Optional Zone.js
• Observable inputs and queries
• Reactive two-way bindings
• Composable components, directives and services
• Composable providers
• Composable subscriptions
• Lifecycle hooks
• Computed values
• Automatic teardown
• RxJS interop (v6 and v7)
• Incrementally adoptable

What it looks like

function setup() {
   const service = inject(Service)
   const count = use(0)

   subscribe(count, () => {
      service.log(count.value)
   })

   return {
      count,
   }
}

@Component({
   inputs: ["count"],
})
export class MyComponent extends ViewDef(setup) {}

Quick Start

Install via NPM

npm install @mmuscat/angular-composition-api

Install via Yarn

yarn add @mmuscat/angular-composition-api

Setup

Provide ZonelessEventManager in your root module. This is required for proper change detection in event handlers.

@NgModule({
   providers: [
      {
         provide: EventManager,
         useClass: ZonelessEventManager,
      },
   ],
})
export class AppModule {}

Api Reference

Read the docs