Click button from library programatically by clicking it's outer div angular

I'm new to Angular. The Google button from the @abacritt/angularx-social-login is just an icon and I want to change its appearance by placing the icon in a div with the words "Sign in with Google" next to it. I'm able to authenticate with Google just clicking on the icon, but I can't understand how to programatically click on it by clicking its outer div. I've been trying ViewChild but no luck. The @abacritt/angularx-social-login package comes with the <asl-google-signin-button></asl-google-signin-button> element, which displays the icon on screen. When clicked, this element initiates the Google Authentication.

Here are my relevant code files:

google-signin-button.component.html

<div (click)="clickGoogleBtn()" class="google_signin">
    <asl-google-signin-button #googleBtnRef></asl-google-signin-button>
</div>

google-signin-button.component.ts

import { Component, OnInit, ViewChild} from '@angular/core';
import { SocialAuthService, SocialUser } from '@abacritt/angularx-social-login';
import {Router} from '@angular/router';
import { ElementRef } from '@angular/core';


@Component({
  selector: 'app-google-signin-button',
  templateUrl: './google-signin-button.component.html',
  styleUrls: ['./google-signin-button.component.scss']
})
export class GoogleSigninButtonComponent implements OnInit{
  @ViewChild('googleBtnRef')
  googleBtn?: ElementRef;

  user?: SocialUser;

  constructor(
    private router: Router,
    private socialAuthService: SocialAuthService) { }

  ngOnInit(): void {
    this.socialAuthService.authState.subscribe((user:SocialUser) => {
      this.user = user;
      console.log(user);
    })
  }

  clickGoogleBtn() {
    console.log(this.googleBtn);
    const event = new MouseEvent('click', {
      view: window,
      bubbles: false,
      cancelable: true
    })
   this.googleBtn?.nativeElement.dispatchEvent(event);
    
  }