angular_bloc 8.0.0-dev.3 angular_bloc: ^8.0.0-dev.3 copied to clipboard
Angular Components that make it easy to implement the BLoC (Business Logic Component) design pattern. Built to be used with the bloc state management package.
A Dart package that helps implement the BLoC pattern in AngularDart. Built to work with package:bloc.
Learn more at bloclibrary.dev!
Sponsors #
Our top sponsors are shown below! [Become a Sponsor]
Try the Flutter Chat Tutorial 💬 |
Angular Components #
BlocPipe is an Angular pipe which helps bind Bloc
state changes to the presentation layer. BlocPipe
handles rendering the html element in response to new states. BlocPipe
is very similar to AsyncPipe
but is designed specifically for blocs.
Cubit Usage #
Lets take a look at how to use BlocPipe
to hook up a CounterPage
html template to a CounterCubit
.
counter_cubit.dart
#
import 'package:bloc/bloc.dart';
class CounterCubit extends Cubit<int> {
CounterCubit() : super(0);
void increment() => emit(state + 1);
void decrement() => emit(state — 1);
}
counter_page_component.dart
#
import 'package:angular/angular.dart';
import 'package:angular_bloc/angular_bloc.dart';
import './counter_cubit.dart';
@Component(
selector: 'counter-page',
templateUrl: 'counter_page_component.html',
pipes: [BlocPipe],
)
class CounterPageComponent implements OnInit, OnDestroy {
late final CounterCubit counterCubit;
@override
void ngOnInit() {
counterCubit = CounterCubit();
}
@override
void ngOnDestroy() {
counterCubit.close();
}
}
counter_page_component.html
#
<div>
<h1>Counter App</h1>
<h2>Current Count: {{ $pipe.bloc(counterCubit) }}</h2>
<button (click)="counterCubit.increment()">➕</button>
<button (click)="counterCubit.decrement()">➖</button>
</div>
Bloc Usage #
Lets take a look at how to use BlocPipe
to hook up a CounterPage
html template to a CounterBloc
.
counter_bloc.dart
#
import 'package:bloc/bloc.dart';
abstract class CounterEvent {}
class Increment extends CounterEvent {}
class Decrement extends CounterEvent {}
class CounterBloc extends Bloc<CounterEvent, int> {
CounterBloc() : super(0) {
on<Increment>((event, emit) => emit(state + 1));
on<Decrement>((event, emit) => emit(state - 1));
}
}
counter_page_component.dart
#
import 'package:angular/angular.dart';
import 'package:angular_bloc/angular_bloc.dart';
import './counter_bloc.dart';
@Component(
selector: 'counter-page',
templateUrl: 'counter_page_component.html',
pipes: [BlocPipe],
)
class CounterPageComponent implements OnInit, OnDestroy {
late final CounterBloc counterBloc;
@override
void ngOnInit() {
counterBloc = CounterBloc();
}
@override
void ngOnDestroy() {
counterBloc.close();
}
void increment() => counterBloc.add(Increment());
void decrement() => counterBloc.add(Decrement());
}
counter_page_component.html
#
<div>
<h1>Counter App</h1>
<h2>Current Count: {{ $pipe.bloc(counterBloc) }}</h2>
<button (click)="increment()">+</button>
<button (click)="decrement()">-</button>
</div>
At this point we have successfully separated our presentational layer from our business logic layer!
Dart Versions #
- Dart 2: >= 2.12.0
Examples #
- Counter - a complete example of how to create a
CounterBloc
and hook it up to an AngularDart app. - Github Search - an example of how to create a Github Search Application using the
bloc
andangular_bloc
packages.