### File

`projects/commons/src/lib/elements/social-login/components/social-login.component.ts`

### Metadata

selector | `cmn-social-login`
styleUrls | `./social-login.component.scss`
templateUrl | `./social-login.component.html`

### Index

###### Methods
Public signInWithFacebook Public signInWithGoogle
###### Inputs
socials

### Constructor

`constructor(service: SocialLoginService)`
Defined in projects/commons/src/lib/elements/social-login/components/social-login.component.ts:12
Parameters :
Name | Type | Optional
service | `SocialLoginService` | No

### Inputs

socials
Type : `string[]`
Defined in projects/commons/src/lib/elements/social-login/components/social-login.component.ts:12

### Methods

Public signInWithFacebook
`signInWithFacebook()`
Defined in projects/commons/src/lib/elements/social-login/components/social-login.component.ts:20
Returns : `void`

Public signInWithGoogle
`signInWithGoogle()`
Defined in projects/commons/src/lib/elements/social-login/components/social-login.component.ts:16
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;
            }
        }
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""