Angular DAPPS. How to connect Angular with Deployed Smart Contract?

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 .

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 and smart contract address.

Best Part integration with Angular Application

To follow the integration process we need to install ethers 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

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 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