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

Question

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);
    
  }

Answer 1

There are two good reads which show you how to change the buttons appearance.

angularrx github
sign in button documentation

One straight forward example

Change type 'icon' to 'standard' to get text inside the button

<asl-google-signin-button type="standard" size="large"> </asl-google-signin-button>

Details from their Github

Sign in with google

GoogleLoginProvider has no signIn() method as other providers, the login flow is triggered by a button that the gis client is generating. Calling SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID) will have no effect.

Instead make sure you subscribed to the authentication state and add the following GoogleSigninButtonDirective to your component template to wrap the 'Sign In With Google' button:

<asl-google-signin-button type='icon' size='medium'></asl-google-signin-button>

Options:

Name	Type	Value	Default
type	string	'icon' or 'standard'	'icon'
size	string	'small', 'medium' or 'large'	'medium'
shape	string	'square','circle','pill' or 'rectangular'	'rectangular'	text	'signin_with','signup_with'or 'continue_with'
width	string	'200 - 400 '
theme	string	'outline','filled_blue' or 'filled_black'	'outline'
logo_alignment	string	'left' or 'center'	'left'

This will only work if the GoogleLoginProvider is registered in SocialAuthServiceConfig.