Ethereum and Angular — Part 2

Component

In the previous article we built an angular module to interact with the Ethereum blockchain.

Now that we have our Module ready for use, let’s try to recover the account currently selected. For that I will log into a MetaMask account on my browser. Of course you can use Geth, Parity or any other ethereum client on you have a node installed on your computer.

First we will import our module into app.module.ts:

imports : [BrowserModule, EthereumModule]

Then in app.component.ts inject the service EthService (note: don’t forget to add EthService in the EthereumModule providers list):

constructor(private eth : EthService) {}

Let’s add an observable address$ that subscribes to the address currently used. Let’s use the async pipe in HTML to display this address. In app. component. html:

<p>Current Account : {{ address$ | async }} </p>

With the async pipe we don’t need to manage the subscription and unsubscription to this observable, Angular does it for us.

Now let’s go to address$ to our currentAccount method. In ngOnInit:

this.address$ = this.eth.currentAccount()

The component should look like this:

Launch ng serve. And there, nothing is displayed…

The problem of angular zones

The problem is that this.eth.currentAccount is done outside the Angular area.

To solve this problem, use the NgZone service provided by Angular. In the constructor :

constructor(private eht : EthService, private zone : NgZone) {}

The disadvantage of using NgZone is that you must subscribe to the observable to change the UI within the Angular zone. This involves changing our address$: Observable<string> into address: string, calling this variable in HTML, and managing the subscription and unsubscribe to our observable ourselves.

Once all modifications have been made, the component should look like this:

We can see that this becomes much more complicated to manage and makes the code much less pleasant to read. In addition, using NgZone gives the impression of hacking, which is not very desirable.

A longer-term solution: NGRX

The NGRX library, for Angular Redux, implements the principles of Redux in Angular. Redux has been quite a revolution in the React world, and NGRX allows us to integrate into Angular this code philosophy, as well as all the tools that go with it.

Using NGRX allows us to maintain a state that contains all the data we want to manipulate. This serves as an interface between Angular and the blockchain to retrieve and store the data we are interested in. This helps us to get rid of NgZone and to have a finer control over the loading of data from Ethereum.

NGRX is a fairly new technology but many Angular developers already use it. We could have re-created a redux store by hand so as not to impose the use of NGRX, but I think that would be counter-productive. For those who are not familiar with NGRX, this is an opportunity to discover this bookstore and all the advantages it offers (at least some of them).

However this series of articles does not aim to train at NGRX, I advise you the very good course of Todd Motto to better discover this bookseller, or the videos of Angular-Firebase which explain very well the functioning of NGRX.