closes #13

src/app/_shared/components/card-display/card-display.component.html

@@ -1,11 +1,11 @@
 @if(card) {
-@if(display === 'images') {
+@if(display() === 'images') {
 <div class="card-image-container">
-  <ion-img [src]="card.image" class="card-image" [ngClass]="[size]"></ion-img>
+  <ion-img [src]="card.image" class="card-image" [ngClass]="[size()]"></ion-img>
 </div>
 }
 
-@if(display === 'text') {
+@if(display() === 'text') {
 <div class="card-text-container">
   <ion-card class="card-info">
     <ion-card-content>

src/app/_shared/components/card-display/card-display.component.ts

@@ -1,7 +1,10 @@
-import { Component, inject, Input, type OnInit } from '@angular/core';
+import { Component, inject, input, type OnInit } from '@angular/core';
 import { type ICard } from '../../../../../interfaces';
 import { CardsService } from '../../../cards.service';
 
+type CardSize = 'grid' | 'small' | 'normal' | 'large';
+type CardDisplay = 'images' | 'text';
+
 @Component({
   selector: 'app-card-display',
   templateUrl: './card-display.component.html',
@@ -10,14 +13,14 @@ import { CardsService } from '../../../cards.service';
 export class CardDisplayComponent implements OnInit {
   private cardsService = inject(CardsService);
 
-  @Input() size: 'grid' | 'small' | 'normal' | 'large' = 'normal';
-  @Input() cardCode!: string;
-  @Input() display: 'images' | 'text' = 'images';
+  public size = input<CardSize>('normal');
+  public cardCode = input.required<string>();
+  public display = input<CardDisplay>('images');
 
   public card: ICard | undefined;
   public soulArray = [];
 
   ngOnInit() {
-    this.card = this.cardsService.getCardById(this.cardCode);
+    this.card = this.cardsService.getCardById(this.cardCode());
   }
 }

src/app/_shared/components/search-cards/search-cards.component.html

@@ -24,7 +24,7 @@ <h2>No results found</h2>
         @for(card of visibleCards; track card.id) {
         <ion-col class="card-container" [sizeMd]="3" [sizeSm]="6" [sizeXs]="12">
           <a [routerLink]="['/card', card.id]">
-            <app-card-display class="card" [cardCode]="card.id" [display]="queryDisplay"></app-card-display>
+            <app-card-display class="card" [cardCode]="card.id" [display]="queryDisplayValue"></app-card-display>
           </a>
         </ion-col>
         }
@@ -41,7 +41,7 @@ <h2>No results found</h2>
     <ion-row>
       <ion-col [sizeXs]="12" [sizeMd]="2">
         <div class="text-display">Cards as</div>
-        <ion-select class="themed" [(ngModel)]="queryDisplay" interface="popover" placeholder="Card Display"
+        <ion-select class="themed" [(ngModel)]="queryDisplayValue" interface="popover" placeholder="Card Display"
           (ionChange)="redoCurrentSearch()">
           <ion-select-option value="images">Images</ion-select-option>
           <ion-select-option value="text">Text</ion-select-option>
@@ -50,34 +50,36 @@ <h2>No results found</h2>
 
       <ion-col [sizeXs]="12" [sizeMd]="4">
         <div class="text-display">Sorted by</div>
-        <ion-select class="themed" [(ngModel)]="querySort" interface="popover" placeholder="Sort Prop"
+        <ion-select class="themed" [(ngModel)]="querySortValue" interface="popover" placeholder="Sort Prop"
           (ionChange)="redoCurrentSearch()">
           <ion-select-option value="name">Name</ion-select-option>
           <ion-select-option value="id">ID</ion-select-option>
           <ion-select-option value="product">Product</ion-select-option>
         </ion-select>
 
-        <ion-select class="themed" [(ngModel)]="querySortBy" interface="popover" placeholder="Sort Dir"
+        <ion-select class="themed" [(ngModel)]="querySortByValue" interface="popover" placeholder="Sort Dir"
           (ionChange)="redoCurrentSearch()">
           <ion-select-option value="asc">Asc ↑</ion-select-option>
           <ion-select-option value="desc">Desc ↓</ion-select-option>
         </ion-select>
       </ion-col>
 
       <ion-col [sizeXs]="12" [sizeMd]="6" class="pagination ion-justify-content-center">
-        <ion-button fill="outline" color="secondary" [disabled]="page <= 0" (click)="changePage(0)">
+        <ion-button fill="outline" color="secondary" [disabled]="pageValue <= 0" (click)="changePage(0)">
           <span class="symbol">&laquo;</span>
         </ion-button>
 
-        <ion-button fill="outline" color="secondary" [disabled]="page <= 0" (click)="changePage(page - 1)">
+        <ion-button fill="outline" color="secondary" [disabled]="pageValue <= 0" (click)="changePage(pageValue - 1)">
           <span class="symbol left">&lsaquo;</span> <span class="ion-hide-sm-down">Previous</span>
         </ion-button>
 
-        <ion-button fill="outline" color="secondary" [disabled]="page >= totalPages" (click)="changePage(page + 1)">
+        <ion-button fill="outline" color="secondary" [disabled]="pageValue >= totalPages"
+          (click)="changePage(pageValue + 1)">
           <span class="ion-hide-sm-down">Next {{ cardsPerPage }}</span> <span class="symbol right">&rsaquo;</span>
         </ion-button>
 
-        <ion-button fill="outline" color="secondary" [disabled]="page >= totalPages" (click)="changePage(totalPages)">
+        <ion-button fill="outline" color="secondary" [disabled]="pageValue >= totalPages"
+          (click)="changePage(totalPages)">
           <span class="symbol">&raquo;</span>
         </ion-button>
       </ion-col>

src/app/_shared/components/search-cards/search-cards.component.ts

@@ -1,11 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {
-  Component,
-  inject,
-  Input,
-  type OnChanges,
-  ViewChild,
-} from '@angular/core';
+import { Component, effect, inject, input, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatatableComponent, SelectionType } from '@siemens/ngx-datatable';
 import { sortBy } from 'lodash';
@@ -14,23 +8,33 @@ import { type ICard } from '../../../../../interfaces';
 import { queryToText } from '../../../../../search/search';
 import { CardsService } from '../../../cards.service';
 
+type QueryDisplay = 'images' | 'text';
+type QuerySort = keyof ICard;
+type QuerySortBy = 'asc' | 'desc';
+
 @Component({
   selector: 'app-search-cards',
   templateUrl: './search-cards.component.html',
   styleUrls: ['./search-cards.component.scss'],
 })
-export class SearchCardsComponent implements OnChanges {
+export class SearchCardsComponent {
   private router = inject(Router);
   private route = inject(ActivatedRoute);
   private cardsService = inject(CardsService);
 
   @ViewChild(DatatableComponent) table!: DatatableComponent;
 
-  @Input() query = '';
-  @Input() queryDisplay: 'images' | 'text' | 'checklist' = 'images';
-  @Input() querySort: keyof ICard = 'name';
-  @Input() querySortBy: 'asc' | 'desc' = 'asc';
-  @Input() page = 0;
+  private queryValue = '';
+  public queryDisplayValue: QueryDisplay = 'images';
+  public querySortValue: QuerySort = 'name';
+  public querySortByValue: QuerySortBy = 'asc';
+  public pageValue = 0;
+
+  public query = input<string>('');
+  public queryDisplay = input<QueryDisplay>('images');
+  public querySort = input<QuerySort>('name');
+  public querySortBy = input<QuerySortBy>('asc');
+  public page = input<number>(0);
 
   public queryDesc = '';
 
@@ -47,38 +51,26 @@ export class SearchCardsComponent implements OnChanges {
   public expanded: any = {};
   public checkboxSelectionType: SelectionType = SelectionType.checkbox;
 
-  ngOnChanges(changes: any) {
-    if (changes.query) {
-      this.query = changes.query.currentValue;
-    }
-
-    if (changes.queryDisplay) {
-      this.queryDisplay = changes.queryDisplay.currentValue;
-    }
-
-    if (changes.querySort) {
-      this.querySort = changes.querySort.currentValue;
-    }
+  constructor() {
+    effect(() => {
+      this.queryValue = this.query();
+      this.queryDisplayValue = this.queryDisplay();
+      this.querySortValue = this.querySort();
+      this.querySortByValue = this.querySortBy();
+      this.pageValue = this.page();
 
-    if (changes.querySortBy) {
-      this.querySortBy = changes.querySortBy.currentValue;
-    }
-
-    if (changes.page) {
-      this.page = changes.page.currentValue;
-    }
-
-    this.search(this.query, false);
-    this.changePage(this.page);
+      this.search(this.queryValue, false);
+      this.changePage(this.pageValue);
+    });
   }
 
   redoCurrentSearch() {
-    this.search(this.query);
+    this.search(this.queryValue);
   }
 
   search(query: string, changePage = true) {
-    this.query = query;
-    this.page = 0;
+    this.queryValue = query;
+    this.pageValue = 0;
     this.totalPages = 0;
     this.displayCurrent = 0;
     this.displayTotal = 0;
@@ -91,9 +83,9 @@ export class SearchCardsComponent implements OnChanges {
       return;
     }
 
-    this.queryDesc = queryToText(this.query);
+    this.queryDesc = queryToText(this.queryValue);
 
-    this.queriedCards = this.cardsService.searchCards(this.query);
+    this.queriedCards = this.cardsService.searchCards(this.queryValue);
     this.doExtraSorting();
 
     if (changePage) {
@@ -102,53 +94,53 @@ export class SearchCardsComponent implements OnChanges {
   }
 
   updateParams() {
-    if (!this.query) {
+    if (!this.queryValue) {
       return;
     }
 
     this.router.navigate([], {
       relativeTo: this.route,
       queryParams: {
-        q: this.query,
-        d: this.queryDisplay,
-        s: this.querySort,
-        b: this.querySortBy,
-        p: this.page,
+        q: this.queryValue,
+        d: this.queryDisplayValue,
+        s: this.querySortValue,
+        b: this.querySortByValue,
+        p: this.pageValue,
       },
       queryParamsHandling: 'merge',
     });
   }
 
   doExtraSorting() {
-    this.queriedCards = sortBy(this.queriedCards, this.querySort);
-    if (this.querySortBy === 'desc') {
+    this.queriedCards = sortBy(this.queriedCards, this.querySortValue);
+    if (this.querySortByValue === 'desc') {
       this.queriedCards = this.queriedCards.reverse();
     }
   }
 
   changePage(newPage: number) {
-    this.page = newPage;
+    this.pageValue = newPage;
     this.totalPages =
       Math.ceil(this.queriedCards.length / this.cardsPerPage) - 1;
 
-    if (this.page > this.totalPages) {
-      this.page = this.totalPages;
+    if (this.pageValue > this.totalPages) {
+      this.pageValue = this.totalPages;
     }
 
-    if (this.page < 0) {
-      this.page = 0;
+    if (this.pageValue < 0) {
+      this.pageValue = 0;
     }
 
     this.visibleCards = this.queriedCards.slice(
-      this.page * this.cardsPerPage,
-      (this.page + 1) * this.cardsPerPage
+      this.pageValue * this.cardsPerPage,
+      (this.pageValue + 1) * this.cardsPerPage
     );
 
-    this.displayCurrent = this.page * this.cardsPerPage + 1;
+    this.displayCurrent = this.pageValue * this.cardsPerPage + 1;
     this.displayTotal = this.queriedCards.length;
     this.displayMaximum = Math.min(
       this.displayTotal,
-      (this.page + 1) * this.cardsPerPage
+      (this.pageValue + 1) * this.cardsPerPage
     );
 
     this.updateParams();

src/app/_shared/components/topbar/topbar.component.html

@@ -6,14 +6,15 @@
           <ion-img src="assets/favicon/android-chrome-192x192.png"></ion-img>
         </a>
 
-        @if(title) {
+        @if(title(); as titleText) {
         <ion-title>
-          {{ title }}
+          {{ titleText }}
         </ion-title>
         }
 
-        @if(showSearch) {
-        <app-omnisearch (type)="type.emit($event)" (enter)="enter.emit($event)" [initialQuery]="query"></app-omnisearch>
+        @if(showSearch()) {
+        <app-omnisearch (type)="type.emit($event)" (enter)="enter.emit($event)"
+          [initialQuery]="query()"></app-omnisearch>
         }
       </ion-col>
 

src/app/_shared/components/topbar/topbar.component.ts

@@ -1,14 +1,15 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 
 @Component({
   selector: 'app-topbar',
   templateUrl: './topbar.component.html',
   styleUrls: ['./topbar.component.scss'],
 })
 export class TopbarComponent {
-  @Input() query = '';
-  @Input() showSearch = true;
-  @Input() title = '';
-  @Output() type = new EventEmitter<string>();
-  @Output() enter = new EventEmitter<string>();
+  public title = input<string>('');
+  public showSearch = input<boolean>(true);
+  public query = input<string>('');
+
+  public type = output<string>();
+  public enter = output<string>();
 }

src/app/card/card.page.html

@@ -8,8 +8,7 @@
     <ion-grid>
       <ion-row>
         <ion-col [sizeXs]="12" [sizeMd]="6" [sizeLg]="4" [offsetLg]="2">
-          <app-card-display class="card" [cardCode]="cardData.id" [size]="'large'"
-            [display]="'images'"></app-card-display>
+          <app-card-display class="card" [cardCode]="cardData.id" [size]="'large'"></app-card-display>
         </ion-col>
 
         <ion-col [sizeXs]="12" [sizeMd]="6" [sizeLg]="4">

src/app/search/search.page.ts

@@ -16,7 +16,7 @@ export class SearchPage {
 
   public query = '';
 
-  public queryDisplay: 'images' | 'text' | 'checklist' = 'images';
+  public queryDisplay: 'images' | 'text' = 'images';
   public querySort: keyof ICard = 'name';
   public querySortBy: 'asc' | 'desc' = 'asc';
   public page = 0;