angular_bloc 10.0.0-dev.3 copy "angular_bloc: ^10.0.0-dev.3" to clipboard
angular_bloc: ^10.0.0-dev.3 copied to clipboard

Platformweb

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.

Angular Bloc Package

Pub build codecov Star on Github Flutter Website Awesome Flutter Flutter Samples License: MIT Discord Bloc Library


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]


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';

sealed class CounterEvent {}
final class CounterIncrementPressed extends CounterEvent {}
final 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));
  }
}

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

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 and angular_bloc packages.

Maintainers #

36
likes
140
pub points
78%
popularity
screenshot

Publisher

verified publisherbloclibrary.dev

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.

Homepage
Repository (GitHub)
View/report issues
Contributing

Topics

#bloc #state-management

Documentation

Documentation
API reference

License

MIT (LICENSE)

Dependencies

bloc, ngdart

More

Packages that depend on angular_bloc