Angular 14 Project to Display Google & Facebook Social Login Buttons in Browser Using TypeScript

Welcome folks today in this blog post we will be displaying the google and facebook social login buttons in browser using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleapp

Now we need to install the below libraries using the below command as shown below

npm i @angular-cool/social-login-buttons

And then we need to see the below directory structure of angular app as shown below

Now we need to go to app.module.ts file and copy paste the following code

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { CoolSocialLoginButtonsModule } from '@angular-cool/social-login-buttons';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule,CoolSocialLoginButtonsModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { BrowserModule } from "@angular/platform-browser";

import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";

import { CoolSocialLoginButtonsModule } from '@angular-cool/social-login-buttons';

@NgModule({

declarations: [AppComponent],

imports: [BrowserModule,CoolSocialLoginButtonsModule],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule {}

And now we need to go to app.component.html file and copy paste the following code

app.component.html

<cool-google-button color="light" (click)="onGoogleLoginClicked()">
  Login with Google
</cool-google-button>
<br><br>
<cool-facebook-button color="dark" (click)="onFacebookLoginClicked()">
  Login with Facebook
</cool-facebook-button>

<cool-google-button color="light" (click)="onGoogleLoginClicked()">

</cool-google-button>

<cool-facebook-button color="dark" (click)="onFacebookLoginClicked()">

</cool-facebook-button>

As you can see we have rendering the google and facebook social login buttons and we have various dark and light theme buttons and also we have assigned the (click) event handlers.

And also we can disable the buttons as well by attaching the [disabled] boolean attribute as shown below

<cool-google-button color="light" [disabled]='true' (click)="onGoogleLoginClicked()">
  Login with Google
</cool-google-button>
<br><br>
<cool-facebook-button color="dark" (click)="onFacebookLoginClicked()">
  Login with Facebook
</cool-facebook-button>

<cool-google-button color="light" [disabled]='true' (click)="onGoogleLoginClicked()">

</cool-google-button>

<cool-facebook-button color="dark" (click)="onFacebookLoginClicked()">

</cool-facebook-button>

As you can see the button is greyed out and we can’t click the login with google button.

Adding Event Listeners

We can go to app.component.ts file and define the methods once we click the buttons as shown below

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";

  googleLogin(){
    alert("google login clicked")
  }

  facebookLogin(){
    alert("facebook login clicked")
  }
}

import { Component } from "@angular/core";

@Component({

selector: "app-root",

templateUrl: "./app.component.html",

styleUrls: ["./app.component.css"]

})

export class AppComponent {

title = "CodeSandbox";

googleLogin(){

alert("google login clicked")

}

facebookLogin(){

alert("facebook login clicked")

}