A state management library for angular applications inspired by the BLoC pattern.
npm install angular-cubitbash
npm install angular-cubit
`
Install the package via yarn:
`bash
yarn add angular-cubit
`
Usage
$3
Implement the state interface with a copyWith method:
`typescript
import {State} from "angular-cubit";
export class CounterState implements State {
count: number;
constructor(count: number = 0) {
this.count = count;
}
}
`
$3
Create a Cubit class that extends Cubit:
Extend the Cubit class to create a specific cubit:
`typescript
import { Injectable } from "@angular/core";
import { CounterState } from "./CounterState";
import {Cubit} from "angular-cubit";
@Injectable({
providedIn: 'root',
})
export class CounterCubit extends Cubit {
constructor() {
super(new CounterState());
}
increment() {
this.emit(this.copyWith({ count: this.state.count + 1 }));
}
decrement() {
this.emit(this.copyWith({ count: this.state.count - 1 }));
}
}
`
$3
Inject the cubit into a component and bind to its state:
`typescript
@Component({
selector: 'app-counter',
templateUrl: './counter.component.html',
styleUrls: ['./counter.component.css'],
standalone: true
})
export class CounterComponent {
constructor(protected counterCubit: CounterCubit) {}
increment() {
this.counterCubit.increment();
}
decrement() {
this.counterCubit.decrement();
}
get count() {
return this.counterCubit.state.count;
}
}
`
`html
{{ count }}
``