Creating a Pokémon hybrid app with Angular 2 and Onsen UI

A couple of months ago we published an article on how to create a Pokedex application using Angular 2. Since then, the stable version of Angular 2 has been released and we have released the RC version of our Angular 2 bindings.

In this article we will use Onsen UI 2 and Angular 2 to create a simple mobile Pokedex app. We will use some of the code from the previous article, but we will integrate it with Onsen UI. We will also take a look at the Monaca CLI, which is a great tool for creating, debugging, and developing apps with Angular 2 and Onsen UI.

With the Monaca CLI you get access to several templates that can serve as starting points for your own apps. The CLI is using Webpack to build and package your app so you don’t have to set it up yourself. The Monaca CLI also integrates with the Monaca Debugger so you can test and debug your apps in real devices.

This app is using the great PokéAPI. The API contains all the necessary information to create a complete Pokedex app, with information from all the Pokemon games. Since this is just a sample app, we will only use a small part of the information available.

You can try out the app below:

https://argelius.github.io/angular2-onsenui-pokedex/

The source code for the app is available in this GitHub repo.

Installing the Monaca CLI

This app was created using the Monaca CLI. It’s a command line tool that can be used to create, debug and build hybrid apps. It is available on NPM so you can install it with the following command:

[sudo] npm install -g monaca

Or, if you are using yarn you can install it like this:

yarn global add monaca

When the program is successfully installed, you can run monaca -v to see the current version:

$ monaca -v 2.1.6

Creating an application

Creating an app with the Monaca CLI is very simple. All you need to do is to navigate to the directory where you want to create your app and run:

monaca create my-app

You can now see what kind of templates are available.

Since we are creating an app with Angular 2 and Onsen UI we will select that and press enter.

In the next screen we select what kind of navigation pattern the app will use. Here we can create an app with tabs, a swipeable side menu or stack navigation. The app we are creating will use stack navigation so we select the Onsen UI V2 Angular 2 Navigation template.

If we press enter again the application will be created for us and all the dependencies will be installed. This might take a while.

Now enter the directory:

cd my-app

To preview the app you can use the following command:

monaca preview

This will start a web server. The app will be automatically rebuilt every time a change occurs so it’s recommended to always have this server running so we can see the changes instantly.

Creating the app

We will put all our code in the src/app folder. This is where the Angular 2 components, services, etc. are located.

The Monaca CLI has created a very simple app for us where we can push and pop pages from the stack. This stack navigation is made possible with the <ons-navigator> component which is rendered by the MyApp component in the app.ts file.

We need to add some behavior to this component. This component will render the master page of the app which contains a list of Pokemon fetched from the PokeAPI. When a Pokemon is clicked we will push a new component called DetailPage to the page stack that displays some additional information about the Pokemon.

The ngOnInit method is called when the component is initialized and we use it to load the first 20 Pokemon from the API using the loadMore() method. This method is also called when the user clicks a button at the bottom of the list.

In the constructor method two services are injected. The PokedexService is used to fetch information from the Pokemon API and the CaughtPokemonService is a simple service that keeps track of the Pokemon that have been caught using a Set object.

To push a page to the stack the ViewChild decorator is used to get a reference to the OnsNavigator directive.

The template in app.html looks like this:

app.html

What this does is that it will render the MasterPage component as the first page in the navigator stack.

The DetailPage component

The component that displays the details for a Pokemon is also quite simple.

One important note is how the parameters that were passed in the push() method of the MasterPage component are retrieved. This is done by injecting the Params service in the constructor:

This is the code for the whole component. It can be found in the detail.ts file.

detail.ts

The template will display some information about the Pokemon and a checkbox that will call the onChange() method when toggled. The template code is in the detail.html file:

Services

A service is an object that can be shared among all your components. It is often used to fetch and store data. In our app, we will create a service that fetches data from the Pokémon API as well as a service that maintains a list of all the Pokemon that have been caught.

The CaughtPokemonService uses the Set data structure that was added to JavaScript in ES6. Angular 2 apps are written in TypeScript so we can use all ES6 features since they are transpiled to ES5.

The CaughtPokemonService code is in the caught-pokemon.service.ts file:

In addition to maintaining a set of Pokemon IDs it will also save the list to localStorage so the app can remember even if it is restarted or if the page is reloaded.

We already created a simple PokedexService in the previous blog post. This time it has been extended to also fetch some additional information that is displayed on the details page:

Conclusion

In this article we have created a very simple Pokedex app using Angular 2 and Onsen UI 2. Even if this Pokedex app doesn’t display a lot of information, we hope you can see how it could be expanded into a more complete app by adding more pages to the navigator and adding more information from the PokeAPI. The Angular 2 bindings for Onsen UI are currently in RC stage but we are getting closer to a stable version.

Onsen UI is an open source library used to create the UI of hybrid apps. You can find more information on our GitHub page. If you like Onsen UI, please don’t forget to give us a star! ★★★★★