Designing an Angular Social Login Button Presentation Component | Task

Ole Ersoy
Mar - 08  -  2 min


We want to create a Angular Material Google Social Login Button in a shared library that has a signIn event that we can listen to in order to trigger social authentication and we also want to reactively disable the button until terms of service have been accepted.


The button design looks like this. It is disabled by default, and can be enabled by assign an Observable<boolean> to the property isTOSAccepted$ that emits true when the button should be enabled.

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';
    selector: 'fs-login-button',
    templateUrl: './login-button.component.html',
    styleUrls: ['./login-button.component.scss']
export class LoginButtonComponent implements OnInit {
    constructor() { }
    signInEvent = new EventEmitter();
    click() { 
    public isTOSAccepted$: Observable<boolean> = of(false)
    ngOnInit(): void { }

The template:

<button [disabled]="!(isTOSAccepted$ | async)"
style="padding: 1rem;">
[svgIcon]=""></mat-icon> &nbsp; &nbsp; Login With Google


Within app.component.ts declare the following method:

signIn() {
    console.log("Sign In Clicked")

On app.component.ts we will create an Observable<boolean> instance that emits true as well:

isTOCAccepted$: Observable<boolean> = of(true)

Within the app.component.html template declare the button:


When the button is clicked it will log Signin Clicked.