Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 17, 2023

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
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

 

 

1
2
3
4
5
6
7
<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>

 

 

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

 

 

1
2
3
4
5
6
7
<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>

 

 

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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")
  }
}

 

 

 

Recent Posts

  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme