Learn how to create your own Dapp with Angular 9 — Part VI.

In this six-part article, we will cover how to create a Dapp with Angular. In Part I, which served as an introduction we covered general information regarding developing the dapp benefits and classification. Using Angular, Angular architecture, benefits. You should start there.

In the previous articles, we started developing our dapp. Specifically,
we learned about dapp classifications and projects and that you can
break your own dapp project into five steps.

We then looked at why to use Angular and its benefits. Next, we created an Angular project, first ensuring the prerequisites were installed and then installing the Angular CLI.

We looked at the pieces that make up Angular such as components, modules, and directives. We also learned how to style a dapp by understanding Angular-style architecture and working with Angular Material.

We started building our own custom components and creating content; we split the app into a footer, header, and body and created a custom transfer component that you will be using in this article. We created the dapp’s smart contract utilizing the following tools the Angular CLI, Truffle, ganache-cli, and MetaMask.

We integrated our smart contract in the dapp’s Angular
project by installing web3.js as well as truffle-contract. We then created our transfer service in Angular and connected our component class to the service class.

In this final and last article, Part IV; we will be linking and connecting our dapp to the Ethereum network and testing.

Connect to MetaMask

At this point, your dapp code is complete. However, if you test your dapp
now, web3 won’t be able to connect to an account.

What you need to do is connect to MetaMask. There is a privacy issue related to dapps where malicious web sites are able to inject code to view users’ activities and Ethereum addresses and then find balance, transaction history, and personal information.

These malicious sites are then able to initiate unwanted transactions
on a user’s behalf, and the user accidentally may approve an unauthorized
transaction and lose funds.