Angular Cubit

Pub build coverage Star on GitHub Discord License: MIT Starware

An AngularDart library built to expose components that integrate with cubits. Built to work with the cubit and bloc state management packages.


Lets take a look at how to use CubitPipe to hook up a CounterPage html template to a CounterCubit.


class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);


<div class="counter-page-container">
  <h1>Counter App</h1>
  <h2>Current Count: {{ counterCubit | cubit }}</h2>
  <button class="counter-button" (click)="counterCubit.increment()">+</button>
  <button class="counter-button" (click)="counterCubit.decrement()">-</button>


import 'package:angular/angular.dart';

import 'package:angular_cubit/angular_cubit.dart';

import './counter_cubit.dart';

  selector: 'counter-page',
  templateUrl: 'counter_page_component.html',
  styleUrls: ['counter_page_component.css'],
  providers: [ClassProvider(CounterCubit)],
  pipes: [CubitPipe],
class CounterPageComponent implements OnDestroy {
  final CounterCubit counterCubit;

  CounterPageComponent(this.counterCubit) {}

  void ngOnDestroy() {

At this point we have successfully separated our presentational layer from our business logic layer. Notice that the CounterPage component knows nothing about what happens when a user taps the button. The component simply invokes increment and decrement on the CounterCubit in response to button taps.

Angular Components

CubitPipe is an Angular pipe which helps bind Cubit state changes to the presentation layer. CubitPipe handles rendering the html element in response to new states. CubitPipe is very similar to AsyncPipe but has a more simple API to reduce the amount of boilerplate code needed.

Dart Versions

  • Dart 2: >= 2.7.0



Very Good Ventures


Angular Cubit is Starware.
This means you're free to use the project, as long as you star its GitHub repository.
Your appreciation makes us grow and glow up. ⭐