angular_cubit 0.2.0-dev.1

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

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

Usage

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

counter_cubit.dart

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

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

copied to clipboard

counter_page_component.html

<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>
</div>

copied to clipboard

counter_page_component.dart

import 'package:angular/angular.dart';

import 'package:angular_cubit/angular_cubit.dart';

import './counter_cubit.dart';

@Component(
  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) {}

  @override
  void ngOnDestroy() {
    counterCubit.close();
  }
}

copied to clipboard

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

Maintainers

• Felix Angelov

Supporters

Starware

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. ⭐