angular_bloc 5.0.0-dev.1 copy "angular_bloc: ^5.0.0-dev.1" to clipboard
angular_bloc: ^5.0.0-dev.1 copied to clipboard

outdated

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 style: effective dart Flutter Website Awesome Flutter Flutter Samples Star on GitHub Discord License: MIT


An Angular package that helps implement the BLoC pattern.

This package is built to work with bloc.

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 has a more simple API to reduce the amount of boilerplate code needed.

Usage #

Lets take a look at how to use BlocPipe to hook up a CounterPage html template to a CounterBloc.

counter_bloc.dart

enum CounterEvent { increment, decrement }

class CounterBloc extends Bloc<CounterEvent, int> {
  @override
  int get initialState => 0;

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    switch (event) {
      case CounterEvent.decrement:
        yield state - 1;
        break;
      case CounterEvent.increment:
        yield state + 1;
        break;
    }
  }
}

counter_page_component.html

<div class="counter-page-container">
  <h1>Counter App</h1>
  <h2>Current Count: {{ counterBloc | bloc }}</h2>
  <button class="counter-button" (click)="increment()">+</button>
  <button class="counter-button" (click)="decrement()">-</button>
</div>

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',
  styleUrls: ['counter_page_component.css'],
  pipes: [BlocPipe],
)
class CounterPageComponent implements OnInit, OnDestroy {
  CounterBloc counterBloc;

  @override
  void ngOnInit() {
    counterBloc = CounterBloc();
  }

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

  void increment() {
    counterBloc.add(CounterEvent.increment);
  }

  void decrement() {
    counterBloc.add(CounterEvent.decrement);
  }
}

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 tells the CounterBloc that the user has pressed the increment/decrement button.

Dart Versions #

  • Dart 2: >= 2.6.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 #

37
likes
0
pub points
63%
popularity

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

License

unknown (license)

Dependencies

angular, bloc

More

Packages that depend on angular_bloc