@mmuscat/angular-composition-api NPM

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 {}