How to use login widget in child component in latest NG14 ?

[shamusschubert]

Discussed in https://github.com/abacritt/angularx-social-login/discussions/566

^{Originally posted by **shamusschubert** August 9, 2022} The demos always say to add the login widget to the app.component.html but most applications (mine at least) use components for headers and footers, with login/logout being a navbar items. If I try to import the SocialLoginModule into my UI module, so I can use in the header component, it says it is already added, and only add itin the app,module. Can this be added to a child module, or is there a way to add it to app.module and make it available to a child component like a navabar? Thanks.

[nikoristar]

Currently I'm following workaround:

Basically there is a directive which loads google button, so we can copy paste it to our application and use it where we need.

1: login.html (or when you need this button) <ts-google-signin></ts-google-signin>

2:

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

@Directive({
  selector: 'ts-google-signin',
})
export class GoogleSigninButtonDirective {
  constructor(
    el: ElementRef,
    socialAuthService: SocialAuthService
  ) {
    socialAuthService.initState.pipe(take(1)).subscribe(() => {
      // @ts-ignore
      google.accounts.id.renderButton(el.nativeElement, {
        theme: "filled_blue",
        size: "medium",
        "data-logo_alignment": "left",
        "width": '249px',
      });
    })
  }
}

google scripts will be pre-loaded by "socialAuthService.initState"

[masum7]

This worked for me. Thank you @nikoristar. I did it inside one component instead of directive.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.