Customize clicks in asl-google-signin-button

[pedromartins94]

So currently is not possible to fully customize the asl-google-signin-button except for the Directive.

Also, the click is not available since it's an iframe.

Is it possible to customize to my own button and call the asl-google-signin-button via the ViewChild?

Current versions:
Angular 16
[email protected]

[lwestfall]

I don't think you're going to get much here, this seems to be something that Google themselves restrict, they want the button rendered in their own iframe (seemingly with great intent).

What you might be able to do is render the asl-google-signin-button in some hidden container, then have a click handler on your own button that finds the div element within the iframe having role="button", and then simulate a click on that element - however that's going to a bit of work for something that might/probably won't work since its a cross domain iframe.

You can do some (very modest) customization of the button appearance using their generator, which you can then use to customize asl-google-signin-button to a degree, e.g.:

<!-- from the google generator -->
<div class="g_id_signin"
     data-type="standard"
     data-shape="pill"
     data-theme="filled_blue"
     data-text="signin_with"
     data-size="large"
     data-logo_alignment="left"
     data-width="100">
</div>

becomes:

  <asl-google-signin-button
    type="standard"
    shape="pill"
    theme="filled_blue"
    text="signin_with"
    size="large"
    logo_alignment="left"
    width="100">
  </asl-google-signin-button>
<!-- note that asl-google-signin-button also has an input for `locale`, see https://developers.google.com/identity/gsi/web/reference/html-reference#data-locale -->

[mikila85]

I want to use my own custom buttons we use material design . These buttons looks out of place. There must be a way to use my own button and wrap it with this component or something. Please help