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
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
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") } } |