Designing an Angular Social Login Button Presentation Component

Image by Mitchell Raman from Pixabay

Updated Version

Scenario

Approach

import { Component, OnInit } from '@angular/core';
import { SVG } from '@fireflysemantics/assets'
import { Input } from '@angular/core';
import { Observable, of } from 'rxjs';
import { Output } from '@angular/core';
import { EventEmitter } from '@angular/core';
@Component({
selector: 'fs-login-button',
templateUrl: './login-button.component.html',
styleUrls: ['./login-button.component.scss']
})
export class LoginButtonComponent implements OnInit { SVG_CONSTANTS = SVG constructor() { }
@Output()
signInEvent = new EventEmitter();
click() {
this.signInEvent.emit()
}
@Input()
public isTOSAccepted$: Observable<boolean> = of(false)
ngOnInit(): void { }
}
<button [disabled]="!(isTOSAccepted$ | async)"(click)="click()"mat-buttonstyle="padding: 1rem;"><mat-icon[svgIcon]="SVG_CONSTANTS.GOOGLE_LOGO.name"></mat-icon> &nbsp; &nbsp; Login With Google</button>

Test

signIn() {
console.log("Sign In Clicked")
}
isTOCAccepted$: Observable<boolean> = of(true)
<fs-login-button 
(signInEvent)="signIn()"
[isTOSAccepted$]="isTOCAccepted$"></fs-login-button>

Founder of Firefly Semantics Corporation