Adding profile component (de)activation logic

src/app/components/profile/profile.component.html

@@ -1,3 +1,11 @@
 <div id="profile-popover">
-	<p>Test</p>
+	<div *ngIf="isLoggedIn">
+		<h2 class="heading">Hello, Paddy!</h2>
+		<p>You're successfully logged in.</p>
+		<p>Your id is: 1</p>
+	</div>
+	<div *ngIf="!isLoggedIn">
+		<h2 class="heading">Not logged in</h2>
+		<p>Please log in to continue</p>
+	</div>
 </div>

src/app/components/profile/profile.component.scss

@@ -8,6 +8,11 @@
 	color: $text;
 	background-color: $secondary;
 	width: 15em;
-	height: 20em;
 	border-radius: 1em;
+	padding: 1em;
+}
+
+h2.heading {
+	text-align: center;
+	font-weight: bold;
 }

src/app/components/profile/profile.component.spec.ts

@@ -1,23 +1,23 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import { ProfileComponent } from './profile.component';
+import {ProfileComponent} from './profile.component';
 
 describe('ProfileComponent', () => {
-  let component: ProfileComponent;
-  let fixture: ComponentFixture<ProfileComponent>;
+	let component: ProfileComponent;
+	let fixture: ComponentFixture<ProfileComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ProfileComponent ]
-    })
-    .compileComponents();
+	beforeEach(async () => {
+		await TestBed.configureTestingModule({
+			declarations: [ProfileComponent]
+		})
+			.compileComponents();
 
-    fixture = TestBed.createComponent(ProfileComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
+		fixture = TestBed.createComponent(ProfileComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
 });

src/app/components/profile/profile.component.ts

@@ -1,15 +1,38 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from '@angular/core';
 
 @Component({
-  selector: 'app-profile',
-  templateUrl: './profile.component.html',
-  styleUrls: ['./profile.component.scss']
+	selector: 'app-profile',
+	templateUrl: './profile.component.html',
+	styleUrls: ['./profile.component.scss']
 })
 export class ProfileComponent implements OnInit {
 
-  constructor() { }
+	initialClick = true;
+	@Output() showProfilePopoverChange = new EventEmitter<boolean>();
 
-  ngOnInit(): void {
-  }
+	isLoggedIn = true;
+
+	constructor(private eRef: ElementRef) {
+	}
+
+	ngOnInit(): void {
+	}
+
+	/**
+	 * Used to close Profile component when user clicks outside the component
+	 * @param event
+	 */
+	@HostListener('document:click', ['$event'])
+	@HostListener('document:touchstart', ['$event'])
+	handleOutsideClick(event: any) {
+		if (this.initialClick) {
+			this.initialClick = false;
+			return;
+		}
+
+		if (!this.eRef.nativeElement.contains(event.target)) {
+			this.showProfilePopoverChange.emit(false);
+		}
+	}
 
 }