Customizing GoogleSigninButton

[filippoalbertini]

Hi, i need to use a standard button for sign in with google and not icon using this field value for type, size and text as i modified in the project on files google-signin-button.directive.ts :

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'asl-google-signin-button',
})
export class GoogleSigninButtonDirective {
  constructor(
    el: ElementRef,
    socialAuthService: SocialAuthService
  ) {
    socialAuthService.initState.pipe(take(1)).subscribe(() => {
      // https://developers.google.com/identity/gsi/web/reference/js-reference
      google.accounts.id.renderButton(el.nativeElement, {
        type: 'standard',
        size: 'medium',
        text: 'signin_with'
      });
    })
  }
}

Is it possible to provide a way to set it?

Thanks

[vaibhavGadre]

Hello @filippoalbertini ,

Please try below as it worked for me. Let me know if it works.

import { Directive, ElementRef } from '@angular/core';
import { take } from 'rxjs';
import { SocialAuthService } from '@abacritt/angularx-social-login';

declare var google;

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'google-signin-button'
})
export class GoogleSigninButtonDirective {

  constructor(
    el: ElementRef,
    private socialAuthService: SocialAuthService
  ) {
    this.render(el)
  }

  render(el) {
    this.socialAuthService.initState.pipe(take(1)).subscribe(() => {
      google.accounts.id.renderButton(el.nativeElement, {
        type: 'standard',
        size: 'medium',
        text: 'signin_with',
        theme: 'filled_blue'
      });
    })
  }
}

[filippoalbertini]

Hi @vaibhavGadre ,

i added the source in my web app with a selector name changed and using it the button appare well. Passing that options directly at the library @abacritt/angularx-social-login for me would be a better way but you gave me a good solution.

Very thanks.

[samet-karaca-crea]

Hello @filippoalbertini ,

Please try below as it worked for me. Let me know if it works.

import { Directive, ElementRef } from '@angular/core';
import { take } from 'rxjs';
import { SocialAuthService } from '@abacritt/angularx-social-login';

declare var google;

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'google-signin-button'
})
export class GoogleSigninButtonDirective {

  constructor(
    el: ElementRef,
    private socialAuthService: SocialAuthService
  ) {
    this.render(el)
  }

  render(el) {
    this.socialAuthService.initState.pipe(take(1)).subscribe(() => {
      google.accounts.id.renderButton(el.nativeElement, {
        type: 'standard',
        size: 'medium',
        text: 'signin_with',
        theme: 'filled_blue'
      });
    })
  }
}

It works

[mamiapatrick]

Hello @samet-karaca-crea I have the same issue about customizing the button with the new directive. Is it possible to change without overwriting the source code of the directive, maybe by a [style] or another property?

[mamiapatrick]

@filippoalbertini @samet-karaca-crea as my repo is under git, changing a file into node_modules would not be tracked in the version control so the commit would not include them and they will not be pushed to colleague. Do you think that there is a way to modify it into the component?

[Heatmanofurioso]

This issue is closed with #547

[DcKunal]

@vaibhavGadre, Thanks sir, for solution but I am still confuse how to use it with directive can you please provide custom button project on stackblitz.