Use a subject for showContent

Change detection is broken for closing cards now that on push detection is enabled. This is because when a card opens, other cards that are closing have no way of knowing they need to update. By switching showContent to an observable, the async pipe will take care of this for us.

Author: KorinaGraber

source/components/cardContainer/card/card.html

@@ -12,7 +12,7 @@
 		</div>
 	</div>
 
-	<div [hidden]="!showContent">
+	<div [hidden]="!(showContent$ | async)">
 		<div class="body"
 			 *ngIf="cardContainer.cardContent"
 			 [class.active]="cardContainer.clickableCards"
@@ -21,10 +21,10 @@
 			<div class="clearfix"></div>
 		</div>
 	</div>
-	<div [hidden]="!cardContainer.cardFooter || !(showContent || permanentFooter)">
+	<div [hidden]="!cardContainer.cardFooter || !((showContent$ | async) || permanentFooter)">
 		<div class="footer" *ngIf="cardContainer.cardFooter">
 			<template [ngTemplateOutlet]="cardContainer.cardFooter.template" [ngOutletContext]="{ $implicit: item }"></template>
 			<div class="clearfix"></div>
 		</div>
 	</div>
-</div>
+</div>

source/components/cardContainer/card/card.tests.ts

@@ -62,16 +62,15 @@ describe('CardComponent', () => {
 
 	describe('toggle', (): void => {
 		it('should toggle the card content', (): void => {
-
-			expect(card.showContent).to.be.false;
+			expect(card.showContent$.getValue()).to.be.false;
 
 			card.toggleContent();
 
-			expect(card.showContent).to.be.true;
+			expect(card.showContent$.getValue()).to.be.true;
 
 			card.toggleContent();
 
-			expect(card.showContent).to.be.false;
+			expect(card.showContent$.getValue()).to.be.false;
 		});
 	});
 
@@ -88,12 +87,12 @@ describe('CardComponent', () => {
 
 	describe('close', (): void => {
 		it('should close the card content if the submit is successful', (): void => {
-			card.showContent = true;
+			card.showContent$.next(true);
 			card.submit = sinon.spy(() => true);
 
 			const closed = card.close();
 
-			expect(card.showContent).to.be.false;
+			expect(card.showContent$.getValue()).to.be.false;
 			expect(closed).to.be.true;
 		});
 
@@ -107,12 +106,12 @@ describe('CardComponent', () => {
 		});
 
 		it('should not close the card if submit fails', (): void => {
-			card.showContent = true;
+			card.showContent$.next(true);
 			card.submit = sinon.spy(() => false);
 
 			const closed = card.close();
 
-			expect(card.showContent).to.be.true;
+			expect(card.showContent$.getValue()).to.be.true;
 			expect(closed).to.be.false;
 		});
 	});

source/components/cardContainer/card/card.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, forwardRef, Optional, SkipSelf, ChangeDetectionStrategy } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, BehaviorSubject } from 'rxjs';
 import { isFunction, assign } from 'lodash';
 
 import { services } from 'typescript-angular-utilities';
@@ -41,7 +41,7 @@ export class CardComponent<T> extends FormComponent {
 	initCard: { (): void } = () => null;
 	clickCard: { (): void } = () => null;
 
-	showContent: boolean = false;
+	showContent$: BehaviorSubject<boolean>;
 
 	cardContainer: CardContainerComponent<T>;
 
@@ -52,10 +52,11 @@ export class CardComponent<T> extends FormComponent {
 			, @Inject(forwardRef(() => CardContainerComponent)) cardContainer: CardContainerComponent<T>) {
 		super(notification, asyncHelper, formService, parentForm);
 		this.cardContainer = cardContainer;
+		this.showContent$ = new BehaviorSubject(false);
 	}
 
 	toggleContent(): void {
-		if (this.showContent) {
+		if (this.showContent$.getValue()) {
 			this.close();
 		} else {
 			this.open();
@@ -68,19 +69,19 @@ export class CardComponent<T> extends FormComponent {
 		}
 
 		if (this.cardContainer.openCard()) {
-			this.showContent = true;
+			this.showContent$.next(true);
 		}
 	}
 
 	close(): boolean {
-		if (!this.showContent) {
+		if (!this.showContent$.getValue()) {
 			return true;
 		}
 
 		const canClose: boolean = !!this.submit();
 
 		if (canClose) {
-			this.showContent = false;
+			this.showContent$.next(false);
 		}
 
 		return canClose;