use the on push strategy, because we can, since we're using immutable data structures all the way down

simplify how you get display settings in passage component
remove uneeded isPunct function

app/db/src/app/search/components/passage/passage-card.component.html

@@ -19,23 +19,26 @@
       <ng-container *ngFor="let para of ch.paras">
         <h3
           class="paragraph-heading"
-          *ngIf="(showParagraphHeadings$ | async) && hasHeader(para.p)"
+          *ngIf="
+            display.showParagraphs &&
+            display.showParagraphHeadings &&
+            hasHeader(para.p)
+          "
         >
           {{ para.p.h }}
         </h3>
 
         <p
           [ngClass]="{
-            'as-inline': (showParagraphs$ | async) === false
+            'as-inline': display.showParagraphs === false
           }"
         >
           <ng-container *ngFor="let vs of para.vss">
-            <strong class="verse-number" *ngIf="showVerseNumbers$ | async"
+            <strong class="verse-number" *ngIf="display.showVerseNumbers"
               >{{ vs.v }}.</strong
             >
             <ng-container *ngFor="let w of vs.w">
-              <ng-container *ngIf="!isPunct(w.t)"> </ng-container
-              ><a
+              <a
                 [title]="this.cardItem.dict + w.s"
                 *ngIf="w.s != null"
                 (click)="openStrongs(w.s, display.showStrongsAsModal)"
@@ -43,7 +46,7 @@
               ><ng-container *ngIf="w.s == null">{{
                 w.t
               }}</ng-container> </ng-container
-            ><br *ngIf="showVersesOnNewLine$ | async" />
+            ><br *ngIf="display.showVersesOnNewLine" />
           </ng-container>
         </p>
       </ng-container>

app/db/src/app/search/components/passage/passage-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { BibleReference, Overlap } from '../../../common/bible-reference';
 import { AppService } from '../../../services/app.service';
@@ -12,17 +12,10 @@ import { NoteItem } from 'src/app/models/note-state';
   templateUrl: 'passage-card.component.html',
   styleUrls: ['./passage-card.component.scss'],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PassageCardComponent extends CardComponent implements OnInit {
   ref: BibleReference;
-
-  showParagraphs$ = this.appService.select((state) => state.displaySettings.value.showParagraphs);
-  showParagraphHeadings$ = this.appService.select(
-    (state) => state.displaySettings.value.showParagraphHeadings && state.displaySettings.value.showParagraphs
-  );
-  showVersesOnNewLine$ = this.appService.select((state) => state.displaySettings.value.showVersesOnNewLine);
-  showVerseNumbers$ = this.appService.select((state) => state.displaySettings.value.showVerseNumbers);
-
   displaySettings$ = this.appService.select((state) => state.displaySettings.value);
 
   // whenever the notes changes, look for any notes that reference this passage.
@@ -142,10 +135,6 @@ export class PassageCardComponent extends CardComponent implements OnInit {
     }
   }
 
-  isPunct(c: string) {
-    return new RegExp('^[.,;:?!]$').test(c);
-  }
-
   hasHeader(p: Paragraph) {
     if (p === undefined) {
       return false;

app/db/src/app/search/components/search-page/search.page.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
 import { FormControl } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
@@ -15,6 +15,7 @@ import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autoc
   selector: 'app-search-page',
   templateUrl: './search.page.html',
   styleUrls: ['./search.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchPage extends SubscriberComponent implements OnInit {
   cards$ = this.appService.select((state) => state.cards);

app/db/src/app/search/components/strongs/card/strongs-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
+import { Component, ElementRef, ViewChild, OnInit, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AppService } from '../../../../services/app.service';
 import { CardComponent } from '../../../../common/components/card.component';
@@ -10,6 +10,7 @@ import { StrongsModalComponent } from '../modal/strongs-modal.component';
   templateUrl: 'strongs-card.component.html',
   styleUrls: ['./strongs-card.component.scss'],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StrongsCardComponent extends CardComponent implements OnInit {
   asModal = false;

app/db/src/app/search/components/strongs/modal/strongs-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, ChangeDetectionStrategy } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { AppService } from '../../../../services/app.service';
 import { CardItem } from '../../../../models/app-state';
@@ -9,6 +9,8 @@ import { Observable } from 'rxjs';
   selector: 'app-strongs-modal',
   templateUrl: 'strongs-modal.component.html',
   styleUrls: ['./strongs-modal.component.scss'],
+  preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class StrongsModalComponent {
   icon$: Observable<string>;

app/db/src/app/search/components/words/words-card.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
+import { Component, ElementRef, ViewChild, ChangeDetectionStrategy } from '@angular/core';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/components/card.component';
 import { WordLookupResult } from '../../../models/words-state';
@@ -10,6 +10,7 @@ import { BibleReference } from 'src/app/common/bible-reference';
   templateUrl: 'words-card.component.html',
   styleUrls: ['./words-card.component.scss'],
   preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class WordsCardComponent extends CardComponent {
   @ViewChild('words') wordsElement: ElementRef;

app/db/src/main.ts

@@ -8,5 +8,6 @@ if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));