angular_cubit 0.0.1-dev.2 copy "angular_cubit: ^0.0.1-dev.2" to clipboard
angular_cubit: ^0.0.1-dev.2 copied to clipboard

discontinued
outdated

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

Angular Cubit

Pub build coverage Star on GitHub License: MIT


WARNING: This is highly experimental

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

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.

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);
}

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>

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();
  }
}

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.

Dart Versions #

  • Dart 2: >= 2.7.0

Maintainers #

4
likes
0
pub points
0%
popularity

Publisher

verified publisherbloc-dev.com

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

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

angular, cubit

More

Packages that depend on angular_cubit