enable string templates, fix resulting issues.

src/src/app/components/add-to-page-modal/add-to-page-modal.component.html

@@ -10,7 +10,7 @@
       <mat-list-option
         *ngFor="let page of this.pages$ | async"
         [value]="page"
-        [checkBoxPosition]="before"
+        [checkboxPosition]="'before'"
       >
         {{ page.title }}
       </mat-list-option>

src/src/app/components/note/edit-modal/note-edit-modal.component.html

@@ -15,7 +15,6 @@
       <mat-chip-grid #chipList aria-label="Cross References">
         <mat-chip-row
           *ngFor="let ref of references"
-          [selectable]="selectable"
           [removable]="removable"
           (removed)="remove(ref)"
         >

src/src/app/components/note/edit-modal/note-edit-modal.component.ts

@@ -23,7 +23,6 @@ export class NoteEditModalComponent {
 
   //#region Cross References
   visible = true;
-  selectable = true;
   removable = true;
   addOnBlur = true;
   readonly separatorKeysCodes: number[] = [ENTER, COMMA, SEMICOLON];

src/src/app/components/saved-page-card/saved-page-card.component.ts

@@ -82,12 +82,12 @@ export class SavedPageCardComponent extends SubscriberBase {
     return '';
   }
 
-  onRemoveCard(card: CardItem) {
+  onRemoveCard(reference: DataReference) {
     this.dialog
       .open(OkCancelModalComponent, {
         data: {
           title: 'Delete Card from Saved Page',
-          content: `Do you want to delete this card '${this.format(card)}' from the saved page '${
+          content: `Do you want to delete this card '${this.format(reference)}' from the saved page '${
             this.savedPage.title
           }?`,
         },
@@ -97,7 +97,7 @@ export class SavedPageCardComponent extends SubscriberBase {
         if (ds.ok) {
           this.appService.updateSavedPage({
             ...this.savedPage,
-            queries: this.savedPage.queries.filter((o) => o !== card),
+            queries: this.savedPage.queries.filter((o) => o !== reference),
           });
           this.snackBar.open(`${this.savedPage.title} has been updated!`, '', {
             duration: 3 * 1000,

src/src/app/components/strongs/card/strongs-card.component.html

@@ -14,7 +14,7 @@
 </div>
 <div class="card-content" *ngIf="cardItem" #strongs>
   <app-strongs
-    [data]="cardItem.data"
+    [data]="strongsResult"
     [isCard]="true"
     (openPassage)="openPassage($event)"
     (openStrongs)="openStrongs($event)"

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

@@ -4,6 +4,7 @@ import { StrongsModalComponent } from '../modal/strongs-modal.component';
 import { CardComponent } from 'src/app/components/card.component';
 import { AppService } from 'src/app/services/app.service';
 import { BibleReference } from 'src/app/common/bible-reference';
+import { StrongsResult } from 'src/app/models/strongs-state';
 
 @Component({
   selector: 'app-strongs-card',
@@ -16,6 +17,10 @@ export class StrongsCardComponent extends CardComponent {
   asModal = false;
   @ViewChild('strongs') strongsElement: ElementRef;
 
+  get strongsResult(){
+    return this.cardItem.data as StrongsResult;
+  }
+
   constructor(protected elementRef: ElementRef, protected appService: AppService, protected dialog: MatDialog) {
     super(elementRef, dialog, appService);
     this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);

src/src/app/components/strongs/modal/strongs-modal.component.html

@@ -16,7 +16,7 @@
 <mat-dialog-content  class="content">
   <br />
   <app-strongs
-    [data]="cardItem.data"
+    [data]="strongsResult"
     (openPassage)="openPassage($event)"
   ></app-strongs>
 </mat-dialog-content>

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

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 import { AppService } from 'src/app/services/app.service';
 import { BibleReference } from 'src/app/common/bible-reference';
 import { CardItem } from 'src/app/models/card-state';
+import { StrongsResult } from 'src/app/models/strongs-state';
 
 @Component({
   selector: 'app-strongs-modal',
@@ -14,6 +15,7 @@ import { CardItem } from 'src/app/models/card-state';
 })
 export class StrongsModalComponent {
   icon$: Observable<string>;
+  strongsResult: StrongsResult;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public cardItem: CardItem,
@@ -21,7 +23,7 @@ export class StrongsModalComponent {
     private appService: AppService
   ) {
     console.log(cardItem);
-
+    this.strongsResult = cardItem.data as StrongsResult;
     this.icon$ = appService.select((state) => state.settings.value.cardIcons.strongs);
   }
 

src/src/app/pages/search/search.page.html

@@ -16,7 +16,7 @@
       #autoCompleteInput
       [formControl]="searchControl"
       [matAutocomplete]="auto"
-      (keyup.enter)="search($event.target.value)"
+      (keyup.enter)="searchWithTarget($event.target)"
     />
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let option of suggestions$ | async" [value]="option">

src/src/app/pages/search/search.page.ts

@@ -109,6 +109,10 @@ export class SearchPageComponent extends SubscriberBase implements OnInit {
     this.appService.removeCard(card);
   }
 
+  async searchWithTarget(target: EventTarget) {
+    const term = (target as HTMLInputElement).value;
+    await this.search(term);
+  }
   async search(search: string) {
     // clear search box.
     if (this.clearSearchAfterQuery) {

src/tsconfig.json

@@ -14,5 +14,8 @@
     "target": "es2022",
     "module": "ESNext",
     "lib": ["es2018", "dom"]
+  },
+  "angularCompilerOptions": {
+    "strictTemplates": true,
   }
 }