@ngeth : Angular — Ethereum

Get started with @ngeth

Published in

B2Expand

3 min readAug 23, 2018

@ngeth is a library built on Angular for super fast bootstrap of Ethereum Dapps. ⚡️

After building many Dapps with angular and web3 I realized I spent a lot of time trying to makeweb3 more angular friendly. I started building ngeth to avoid the same hacks over and over again

Introducing ngeth

ngeth is an alternative to web3 for angular based decentralized applications. It’s built with angular and rxjs following angular best practices. It’s made to bootstrap angular dapps very easily without any hack.

⚠️Not for production ⚠️

ngeth is still an early stage project so DON’T USE IT IN PRODUCTION MODE. The project is based on my sole experience with angular and Ethereum, therefore I would like to get a maximum of feedbacks to build this library the way the community wants it to be. So please, give it a try, make suggestions, enjoy… but don’t use it in production (yet 😋).

Install

ngeth has 4 modules :

@ngeth/utils — Utils to manipulate BigNumbers and Hex values.
@ngeth/provider— The provider to connect to your node. HTTP and WebSocket are supported.
@ngeth/auth — An Authentication system to either store accounts on the node or on localStorage (under heavy development).
@ngeth/contract — The lib to build and manage contracts (ABIEncoder V2 supported 🔥).

Here is how each module depends on the other :

utils > provider > auth > contract

Let’s start with @ngeth/provider :

npm install @ngeth/utils @ngeth/provider —-save

Get the current block number

In my previous articles I explained how to get the current account. This time we’ll get the current block number.

Create a new project :

ng new ngeth-starter

Imports ProviderModule

In your app.module.ts import ProviderModule :

Import ProviderModule

ProviderModule comes with a static method init that takes the url of the node you want to connect to. You can use HTTP and WS connections (IPC not supported yet). Here I connect to ropsten with infura.

ProviderModule setups everything you need to make JSON-RPC calls to Ethereum. It comes with a handy service: Eth.

Use `Eth` in your component

Start by injecting Eth in your component, and show the current block number in the template with the pipe async:

And voila!! Super easy to use, no global variable, it’s observable based, strongly typed … Build for Angular ⭐️.

Let me know what do you think of it, and how you would like it to become!

Gotchas

“Nothing appears in my browser”: Try to disable MetaMask if you have the extension in your browser. By default ngeth uses the currentProvider if any, and because of the long pooling method of the MetaMask Provider it doesn’t work well with the Angular zones…
“The number doesn’t change”: It’s normal, we’re using HTTP. It means that the request is emitted once. To keep track we should use WebSocket and the OnNewBlock method of Eth. Maybe in the next article 😉.