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

Most likely the click event exists on an inner element, not the outermost tag. I see you've already injected the `SocialAuthService`, why not just call `signInWithGoogle()` like they've outlined? https://www.npmjs.com/package/@abacritt/angularx-social-login. If you wanted to click on the element instead of using the service you'd have to figure out exactly which element has the event, then use vanilla JS to select it. — Chris Hamilton, Jul 05 '22 at 01:29
Sorry about that. Their readme says that for Sign In With Google we just have to use the button. SocialAuthService.signIn(GoogleLoginProvider.PROVIDER_ID) won't work. https://github.com/abacritt/angularx-social-login#readme — Michael Albrecht, Jul 05 '22 at 02:03
Also, when I drill down into the children of the element, with console.log(this.googleBtn?.nativeElement.children[0].children[1]), I come across an iframe, but I don't know how to drill down further to click the button inside of it. I don't even know if that's possible. — Michael Albrecht, Jul 05 '22 at 02:09
I looked at their demo in two different browsers and I see that the div with the click element depends on the browser you're using.... me personally I'd look for a different library. Tip: with a debugger click on the element in the `Elements` tab, then just do `$0.click()` in the console to see if it does anything. — Chris Hamilton, Jul 05 '22 at 02:15
On firefox it's a div outside the iframe with `aria-label="Sign in with google"` and on chrome it's a div inside the iframe with `id="container"` — Chris Hamilton, Jul 05 '22 at 02:17
Thanks for the tip! Do you know of any Angular libraries that work well for Google Authentication? — Michael Albrecht, Jul 05 '22 at 02:19
Firebase Authentication module is pretty good. Firebase is essentially just a wrapper for a bunch of google APIs. There is a library called AngularFire that integrates it with angular. — Chris Hamilton, Jul 05 '22 at 02:34
I also just noticed this package: https://www.npmjs.com/package/firebaseui — Chris Hamilton, Jul 05 '22 at 02:37

score 9 · Answer 1 · edited May 23 '23 at 21:58

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.

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

1 Answers1

One straight forward example

Details from their Github

Sign in with google