Description:

angular bloc

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);
}
copied to clipboard
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();
}
}
copied to clipboard
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>
copied to clipboard
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 CounterIncrementPressed extends CounterEvent {}
class CounterDecrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
CounterBloc() : super(0) {
on<CounterIncrementPressed>((event, emit) => emit(state + 1));
on<CounterDecrementPressed>((event, emit) => emit(state - 1));
}
}
copied to clipboard
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(CounterIncrementPressed());

void decrement() => counterBloc.add(CounterDecrementPressed());
}
copied to clipboard
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>
copied to clipboard
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 and angular_bloc packages.

Maintainers #

Felix Angelov

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter