Angular DAPPS. How to connect Angular with Deployed Smart Contract?
Tags: blockchain, angular, web3
Published: 2022-08-21 08:48:31


---

Hello to all my beautiful reader and to those who are learning to code.In this writing I am going to share how to create a web3 front-end application in Angular and connect with deployed smart contract . 
Readers are going to discover the procedures and npm package name to do the work done.

**Prerequisites **
Basics of Angular framework .
Basic of Solidity Programming Language.
Basic of Blockchain and Smart Contract.
Beginner level of knowledge in OOP.

I personally want to give a huge shout out to LearnWeb3Dao to make learning block chain so easy thorough step by step process with structured practical based learning methods.

**What is Smart Contract will Do ?  **

In this section i am going to share the code for smart contract, what this smart contract does , is allowing any metamask wallet to have an entry into Whitelist Object , and set a boolean flag to true . Based on the whitelist addresses any future business decisions can be taken. Or in other point this Whitelist smart contract is replication of a database model , which will hold the wallet address to have an early bird access .


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b24nsvlvi6qydl6hwwi.png)

Now our smart contract is ready to be deployed.After compilation process done , we need two variables through which we can connect smart contract with frontend application ,these  are a contract [ABI](https://github.com/tamalsen2509/frontend_whitelist_by_learn_web3/blob/feature/src/connection/ABI.ts) and smart contract [address](https://github.com/tamalsen2509/frontend_whitelist_by_learn_web3/blob/feature/src/connection/address.ts).

**Best Part integration with Angular Application**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69r7uxrkdkv9hid64s77.png)

To follow the integration process we need to install [ethers](https://docs.ethers.io/v5/) package in our angular apps , use angular cli command and run npm i ethers . In angular component import ethers and follow below code to begin . To change a state of a smart contract we need 2 object or classes provider & signer


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkfk9xra068m71nl2a9v.png)

declare the function name connecToWallet() and call the function inside ngOnit , so that once the component will load , the function will fire and connect to metamask wallet.

**Change the State of smart contract /call Add into whitelist function**

To add a wallet address in whitelist contract please declare a function as per the example code;

```
  async connectContract() { // function bind with click event 
    // method to enter details in smart contract
    try { // all we need an abi file and deployed smart contract address;
      this.whitelistContract = new ethers.Contract(ADDRESS_WHITELIST, WhitelistABI.abi, this.signer)
      const tx = await this.whitelistContract.addAddresstoWhiteList() // declare transaction 
      await tx.wait();

    } catch (error: any) {


      // console.log(error.message)
      this.isError = this.fetchStringContent(error.message)


    }

  }

```
**Call the function to return the total number of contract white listed**

To know, the current count of whitelist address, we need to call , Whitelist.numAddressesWhitelisted variable from solidity file ; Please follow the code as per screen shot;

```
  async getNumberofWhiteList() {

    try {
      this.whitelistContract = new ethers.Contract(ADDRESS_WHITELIST, WhitelistABI.abi, this.signer)
      this.whiteListNumbers = await this.whitelistContract.numAddressesWhitelisted()


    } catch (error) {
      console.log(error)
    }


  }

```
All this we need to create a front end dapps with angular , adding more convenience , I am going to share the [repository](https://github.com/tamalsen2509/frontend_whitelist_by_learn_web3) details , so that you can download and play around with existing code base;

Before leaving just want to share one wisdom , to learn new technology or skills , takes time to grasp. Hence just try to give yourself 30 mins everyday to practice , have faith on yourself and enjoy the process.

If you have any feedback on this article please share trough comments.

**Thinking of hiring** my team for your next **agile development project**, write me at tamal.sen@outlook.com