chore(angular): update to Transloco 5.0 and to standalone directives …

…and pipes
axeleroy · Aug 3, 2023 · 6d5c71f · 6d5c71f
1 parent de4f1f4
commit 6d5c71f
Show file tree

Hide file tree

Showing 15 changed files with 64 additions and 139 deletions.
diff --git a/angular/package-lock.json b/angular/package-lock.json
diff --git a/angular/package.json b/angular/package.json
@@ -23,7 +23,7 @@
     "@angular/platform-browser-dynamic": "^16.1.8",
     "@angular/router": "^16.1.8",
     "@ng-bootstrap/ng-bootstrap": "^15.1.0",
-    "@ngneat/transloco": "^4.3.0",
+    "@ngneat/transloco": "^5.0.3",
     "@ngneat/transloco-locale": "^5.0.0",
     "@popperjs/core": "^2.11.8",
     "@types/canvas-confetti": "^1.6.0",
@@ -60,4 +60,4 @@
     "purgecss-webpack-plugin": "^5.0.0",
     "typescript": "~4.9.5"
   }
-}
+}
diff --git a/angular/src/app/navigation-bar/app-title/nav-app-title.component.ts b/angular/src/app/navigation-bar/app-title/nav-app-title.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
   selector: 'shpp-nav-app-title',
   templateUrl: './nav-app-title.component.html',
   standalone: true,
-  imports: [ TranslocoModule ]
+  imports: [ TranslocoDirective ]
 })
 export class NavAppTitleComponent {
 

diff --git a/angular/src/app/navigation-bar/game-info/nav-game-info.component.ts b/angular/src/app/navigation-bar/game-info/nav-game-info.component.ts
@@ -6,13 +6,13 @@ import { NgbOffcanvas, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { Subscription } from 'rxjs';
 import { GameFormComponent } from '../../shared/game-form/game-form.component';
 import { NgIf } from '@angular/common';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
     selector: 'shpp-game-info',
     templateUrl: './nav-game-info.component.html',
     standalone: true,
-    imports: [TranslocoModule, NgIf, NgbTooltip, GameFormComponent]
+    imports: [TranslocoDirective, NgIf, NgbTooltip, GameFormComponent]
 })
 export class NavGameInfoComponent implements OnDestroy {
 

diff --git a/angular/src/app/navigation-bar/game-name/nav-game-name.component.ts b/angular/src/app/navigation-bar/game-name/nav-game-name.component.ts
@@ -4,15 +4,15 @@ import { GameInfo } from '../../model/events';
 import { Subscription } from 'rxjs';
 import { ToastService } from '../../shared/toast/toast.service';
 import { Clipboard } from '@angular/cdk/clipboard';
-import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
+import { TranslocoDirective, TranslocoService } from '@ngneat/transloco';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { NgIf } from '@angular/common';
 
 @Component({
     selector: 'shpp-game-name',
     templateUrl: './nav-game-name.component.html',
     standalone: true,
-    imports: [TranslocoModule, NgIf, NgbTooltip]
+    imports: [TranslocoDirective, NgIf, NgbTooltip]
 })
 export class NavGameNameComponent implements OnDestroy {
 

diff --git a/angular/src/app/navigation-bar/navigation-bar.component.ts b/angular/src/app/navigation-bar/navigation-bar.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
   standalone: true,
   selector: 'shpp-navigation-bar',
   templateUrl: './navigation-bar.component.html',
-  imports: [TranslocoModule],
+  imports: [TranslocoDirective],
   styleUrls: ['./navigation-bar.component.scss']
 })
 export class NavigationBarComponent {

diff --git a/angular/src/app/navigation-bar/player-info/nav-player-info.component.ts b/angular/src/app/navigation-bar/player-info/nav-player-info.component.ts
@@ -2,13 +2,13 @@ import { Component } from '@angular/core';
 import { NgbOffcanvas, NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 import { UserInformationService } from '../../shared/user-info/user-information.service';
 import { PlayerNameFormComponent } from '../../shared/player-name-form/player-name-form.component';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
     selector: 'shpp-nav-player-info',
     templateUrl: './nav-player-info.component.html',
     standalone: true,
-    imports: [TranslocoModule, PlayerNameFormComponent, NgbTooltip]
+    imports: [TranslocoDirective, PlayerNameFormComponent, NgbTooltip]
 })
 export class NavPlayerInfoComponent {
   constructor(public userInformation: UserInformationService,

diff --git a/angular/src/app/ongoing-game/card-table/card-table.component.ts b/angular/src/app/ongoing-game/card-table/card-table.component.ts
@@ -5,14 +5,14 @@ import { Deck } from '../../model/deck';
 import { CurrentGameService } from '../current-game.service';
 import { PlayerHandComponent } from './player-hand/player-hand.component';
 import { KeyValuePipe, NgFor } from '@angular/common';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
     selector: 'shpp-card-table',
     templateUrl: './card-table.component.html',
     styleUrls: ['./card-table.component.scss'],
     standalone: true,
-    imports: [TranslocoModule, NgFor, PlayerHandComponent, KeyValuePipe]
+    imports: [TranslocoDirective, NgFor, PlayerHandComponent, KeyValuePipe]
 })
 export class CardTableComponent implements OnDestroy {
   state: GameState = {}

diff --git a/angular/src/app/ongoing-game/card-table/player-hand/player-hand.component.ts b/angular/src/app/ongoing-game/card-table/player-hand/player-hand.component.ts
@@ -2,21 +2,18 @@ import { Component, Input } from '@angular/core';
 import { PlayerState } from '../../../model/events';
 import { Deck, displayCardValue } from '../../../model/deck';
 import { NgIf } from '@angular/common';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
     selector: 'shpp-player-hand',
     templateUrl: './player-hand.component.html',
     styleUrls: ['./player-hand.component.scss'],
     standalone: true,
-    imports: [TranslocoModule, NgIf]
+    imports: [TranslocoDirective, NgIf]
 })
 export class PlayerHandComponent {
   @Input() playerState?: PlayerState;
   @Input() deck?: Deck;
 
   displayCardValue = displayCardValue;
-  isNan(input: any) {
-    return Number.isNaN(Number(input));
-  }
 }
diff --git a/angular/src/app/ongoing-game/turn-summary/turn-summary.component.ts b/angular/src/app/ongoing-game/turn-summary/turn-summary.component.ts
@@ -5,15 +5,15 @@ import { Deck, decksDict, displayCardValue } from '../../model/deck';
 import { AsyncPipe, KeyValue, KeyValuePipe, NgClass, NgFor } from '@angular/common';
 import { CurrentGameService } from '../current-game.service';
 import confetti from 'canvas-confetti';
-import { TranslocoLocaleModule } from '@ngneat/transloco-locale';
-import { TranslocoModule } from '@ngneat/transloco';
+import { TranslocoDecimalPipe, TranslocoPercentPipe } from '@ngneat/transloco-locale';
+import { TranslocoDirective } from '@ngneat/transloco';
 
 @Component({
     selector: 'shpp-turn-summary',
     templateUrl: './turn-summary.component.html',
     styleUrls: ['./turn-summary.component.scss'],
     standalone: true,
-    imports: [TranslocoModule, NgFor, NgClass, AsyncPipe, KeyValuePipe, TranslocoLocaleModule]
+    imports: [TranslocoDirective, NgFor, NgClass, AsyncPipe, KeyValuePipe, TranslocoDecimalPipe, TranslocoPercentPipe]
 })
 export class TurnSummaryComponent implements AfterViewInit, OnDestroy {
   private subscriptions: Subscription[] = [];