login.component.css

.bg-transparent {
    background-color: transparent;
  }
  
  :host {
    height: 100%;
  }
  
  .photo {
    object-fit: contain;
  }
  
  .card {
    width: 20rem;
    margin: 0 auto;
  }

login.component.html

<div class="jumbotron bg-transparent text-center">
    <div *ngIf="!user" class="card text-center">
      <h6 class="card-header">
        Social Login Demo
      </h6>
      <div class="card-block">
        <h4 class="card-title">Not signed in</h4>
        <p class="card-text">Sign in with</p>
      </div>
      <div class="card-block">
        <button class="btn btn-social-icon btn-google mx-1" (click)="signInWithGoogle()"><span class="fab fa-google"></span></button>
      </div>
    </div>
    <div *ngIf="user" class="card text-center">
      <h6 class="card-header">
        Social Login Demo
      </h6>
      <div class="card-block"></div>
      <img *ngIf="user.photoUrl" class="card-img-top img-responsive photo" src="{{ user.photoUrl }}">
      <div class="card-block">
        <h4 class="card-title">{{ user.name }}</h4>
        <p class="card-text">{{ user.email }}</p>
        <p class="card-text">Logged in with {{ user.provider }}</p>
      </div>
      <div class="card-block">
        <button class="btn btn-danger" (click)="signOut()">Sign out</button>
      </div>
    </div>
  </div>

login.component.ts

import { Component, OnInit } from '@angular/core';
import {SocialAuthService} from 'angularx-social-login';
import {SocialUser, GoogleLoginProvider} from 'angularx-social-login';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  
  constructor(private authService: SocialAuthService) { }
  user: SocialUser | undefined;
  ngOnInit(): void {
    this.authService.authState.subscribe((user) => {
      this.user = user;
    })
  }

  signInWithGoogle() : any{
    this.authService.signIn(GoogleLoginProvider.PROVIDER_ID);
  }

  signOut() : any{
    this.authService.signOut();
  }

}