Create a custom button and trigger google signin action

[alexjar2211]

Hi, It seems there is a way to trigger the action for google signin method.
https://medium.com/@leonardosalles/a-guide-to-custom-google-sign-in-button-e7b02c2c5e4f

I read that article and applied some changes to replicate the use case using this library and It worked.

If you use <asl-google-signin-button style="display: none;" #customGoogleBtn></asl-google-signin-button> it shows that div that menctions in the article and the "click" event can be trigger from the component.

If you delete "display: none" the button renders and that div stays empty.

Maybe this is not a stable solution because there is not a official documentation, maybe is bug and may google it fixed later.

Anyhow

<asl-google-signin-button style="display: none;" #customGoogleBtn></asl-google-signin-button>
<button class="custom-google-btn" (click)="triggerGoogleAction()">Test</button>

@ViewChild('customGoogleBtn') customGoogleBtn: ElementRef;

constructor(private authSocial: SocialAuthService) { }

triggerGoogleAction() {
  this.customGoogleBtn.nativeElement.querySelector('div[role="button"]').click();
}

[pedromartins94]

I tried to make this work but this does fail in Firefox. Any updates on this?

[alexjar2211]

You are right. I have only made it work in chrome. I'm going to close this topic because it is not stable.