docs/src/content/docs/tutorials/ngdart-counter.mdx
import RemoteCode from '/components/code/RemoteCode.astro';
import ActivateStagehandSnippet from '/components/tutorials/ngdart-counter/ActivateStagehandSnippet.astro';
import StagehandSnippet from '/components/tutorials/ngdart-counter/StagehandSnippet.astro';
import InstallDependenciesSnippet from '/components/tutorials/ngdart-counter/InstallDependenciesSnippet.astro';
In the following tutorial, we're going to build a Counter in AngularDart using the Bloc library.
We'll start off by creating a brand new AngularDart project with stagehand.
If you don't have stagehand installed, activate it via:
<ActivateStagehandSnippet />Then generate a new project via:
<StagehandSnippet />We can then go ahead and replace the contents of pubspec.yaml with:
<RemoteCode url="https://raw.githubusercontent.com/felangel/bloc/master/examples/angular_counter/pubspec.yaml" title="pubspec.yaml" />
and then install all of our dependencies
<InstallDependenciesSnippet />Our counter app is just going to have two buttons to increment/decrement the
counter value and an element to display the current value. Let's get started
designing the CounterEvents.
Since our counter's state can be represented by an integer we don't need to create a custom class and we can co-locate the events and bloc.
<RemoteCode url="https://raw.githubusercontent.com/felangel/bloc/master/examples/angular_counter/lib/src/counter_page/counter_bloc.dart" title="lib/src/counter_page/counter_bloc.dart" />
:::note
Just from the class declaration we can tell that our CounterBloc will be
taking CounterEvents as input and outputting integers.
:::
Now that we have our CounterBloc fully implemented, we can get started
creating our AngularDart App Component.
Our app.component.dart should look like:
<RemoteCode url="https://raw.githubusercontent.com/felangel/bloc/master/examples/angular_counter/lib/app_component.dart" title="lib/app_component.dart" />
and our app.component.html should look like:
<RemoteCode url="https://raw.githubusercontent.com/felangel/bloc/master/examples/angular_counter/lib/app_component.html" title="lib/app_component.html" />
Finally, all that's left is to build our Counter Page Component.
Our counter_page_component.dart should look like:
<RemoteCode url="https://raw.githubusercontent.com/felangel/bloc/master/examples/angular_counter/lib/src/counter_page/counter_page_component.dart" title="lib/src/counter_page/counter_page_component.dart" />
:::note
We are able to access the CounterBloc instance using AngularDart's dependency
injection system. Because we have registered it as a Provider, AngularDart can
properly resolve CounterBloc.
:::
:::note
We are closing the CounterBloc in ngOnDestroy.
:::
:::note
We are importing the BlocPipe so that we can use it in our template.
:::
Lastly, our counter_page_component.html should look like:
<RemoteCode url="https://raw.githubusercontent.com/felangel/bloc/master/examples/angular_counter/lib/src/counter_page/counter_page_component.html" title="lib/src/counter_page/counter_page_component.html" />
:::note
We are using the BlocPipe so that we can display our CounterBloc state as it
is updated.
:::
That's it! We've separated our presentation layer from our business logic layer.
Our CounterPageComponent has no idea what happens when a user presses a
button; it just adds an event to notify the CounterBloc. Furthermore, our
CounterBloc has no idea what is happening with the state (counter value); it's
simply converting the CounterEvents into integers.
We can run our app with webdev serve and can view it locally.
The full source for this example can be found here.