projects/commons/src/lib/elements/social-login/components/social-login.component.ts
| selector | cmn-social-login |
| styleUrls | ./social-login.component.scss |
| templateUrl | ./social-login.component.html |
Methods |
|
Inputs |
constructor(service: SocialLoginService)
|
||||||
|
Parameters :
|
| socials | |
Type : string[]
|
|
| Public signInWithFacebook |
signInWithFacebook()
|
|
Returns :
void
|
| Public signInWithGoogle |
signInWithGoogle()
|
|
Returns :
void
|
import { Component, Input } from '@angular/core';
import { SocialLoginService } from '../services';
@Component({
selector: 'cmn-social-login',
templateUrl: './social-login.component.html',
styleUrls: [ './social-login.component.scss' ],
})
export class SocialLoginComponent {
@Input() public readonly socials: string[];
constructor(private readonly service: SocialLoginService) {}
public signInWithGoogle() {
this.service.singInWithGoogle();
}
public signInWithFacebook() {
this.service.singInWithFacebook();
}
}
<a class="is-facebook"
(click)="signInWithFacebook()">
<i class="fab fa-facebook-f"></i>
</a>
<a class="is-google"
(click)="signInWithGoogle()">
<i class="fab fa-google"></i>
</a>
./social-login.component.scss
:host {
a {
font-size: 1.5em;
margin: 0 .4em;
&.is-google {
padding: .3em .4em;
background: #dc4a3d;
}
&.is-facebook {
padding: .3em .6em;
background: #3c5a9a;
}
i {
color: white;
}
}
}