How to connect with wallet MetaMask in angular uing web3?

Question

I am implementing the code in angular to connect with crypto wallet on button click, I have also installed the web3 but I don't know how to remove the error and use the code init.

connectWallet(){

    let web3; 
    let ethereum = window.ethereum;

    if (typeof window.web3 !== 'undefined') {
         web3 = new Web3(window.web3.currentProvider);
      } else {
         web3 = new Web3.providers.HttpProvider(localprovide);
      }

     // ethereum = new Web3(window.ethereum);

     ethereum.enable().then(async (accounts) => {
       // console.log('transfer called.........', accounts[0]);
        localStorage.setItem('account', accounts[0]);
      });

      if (window.web3) {
        // Subscription register
        ethereum.on('accountsChanged', async (accounts) => {
            // Reload to avoid MetaMask bug: "MetaMask - RPC Error: Internal JSON-RPC"
            window.location.reload();
        });

        window.ethereum.on('networkChanged', async (network) => {
            window.location.reload();
        });
    }
}

Answer 1

In app component OnInit:

declare const web3: any;
declare const Web3: any;

  public ngOnInit() {
    if (typeof web3 !== 'undefined') {
      // Use Mist/MetaMask's provider
      this.web3Service.web3Instance = new Web3(web3.currentProvider);
      this.web3Service.initContractInstance();

    } else {
      // Handle the case where the user doesn't have web3. Probably
      // show them a message telling them to install Metamask in
      // order to use our app.
    }
  }

Web3Services:

@Injectable()
export class Web3Service {
  private contractAddress = "your Contract Address";
  public contractInstance: any;
  public web3Instance: any;


  public initContractInstance() {
    this.contractInstance = new this.web3Instance.eth.Contract(ABI, this.contractAddress);
  }

  public getAccounts(): Promise<any> {
    return this.web3Instance.eth.getAccounts()
  }

  public signUp(account: string): Promise<any> {
    return this.contractInstance.methods.signUp()
      .send({ from: account, value: this.web3Instance.utils.toWei(PRICES.signUp, 'ether') })
  }
}

In component where you want to call some method that needs account:

export class WelcomeComponent implements OnInit {

  constructor(private web3Service: Web3Service) {
  }

  ngOnInit(): void {
  }

  public connectWallet() {
    if (!ethEnabled()) {
      console.log("Need to download Wallet")
    } else {
      from(this.web3Service.getAccounts())
        .subscribe(accounts => {
          this.web3Service.signUp(accounts[0])
            .then(result => {
              console.log(result)
            })
        })
    }
  }
}