Merge pull request #13785 from Arematics/issue-13784

Fixed #13784 - Fixed toast ngClass with SSR and Hydration
primefaces · Nov 8, 2023 · 19ae647 · 19ae647
2 parents 993f999 + 2c74146
commit 19ae647
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/app/components/toast/toast.interface.ts b/src/app/components/toast/toast.interface.ts
@@ -1,6 +1,5 @@
 import { TemplateRef } from '@angular/core';
 import { Message } from 'primeng/api';
-import { Toast } from './toast';
 
 /**
  * Defines valid templates in Toast.
@@ -17,6 +16,7 @@ export interface ToastTemplates {
         $implicit: any;
     }): TemplateRef<{ $implicit: any }>;
 }
+
 /**
  * Custom close event.
  * @see {@link Toast.onClose}
@@ -28,6 +28,7 @@ export interface ToastCloseEvent {
      */
     message: Message;
 }
+
 /**
  * Custom close event.
  * @see {@link ToastItem.onClose}
@@ -38,3 +39,5 @@ export interface ToastItemCloseEvent extends ToastCloseEvent {
      */
     index: number;
 }
+
+export type ToastPositionType = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center';
diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
@@ -31,7 +31,7 @@ import { TimesCircleIcon } from 'primeng/icons/timescircle';
 import { RippleModule } from 'primeng/ripple';
 import { ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primeng/utils';
 import { Subscription } from 'rxjs';
-import { ToastCloseEvent, ToastItemCloseEvent } from './toast.interface';
+import { ToastCloseEvent, ToastItemCloseEvent, ToastPositionType } from './toast.interface';
 
 @Component({
     selector: 'p-toastItem',
@@ -92,7 +92,13 @@ import { ToastCloseEvent, ToastItemCloseEvent } from './toast.interface';
                     opacity: 1
                 })
             ),
-            transition('void => *', [style({ transform: '{{showTransformParams}}', opacity: 0 }), animate('{{showTransitionParams}}')]),
+            transition('void => *', [
+                style({
+                    transform: '{{showTransformParams}}',
+                    opacity: 0
+                }),
+                animate('{{showTransitionParams}}')
+            ]),
             transition('* => void', [
                 animate(
                     '{{hideTransitionParams}}',
@@ -183,14 +189,15 @@ export class ToastItem implements AfterViewInit, OnDestroy {
         this.clearTimeout();
     }
 }
+
 /**
  * Toast is used to display messages in an overlay.
  * @group Components
  */
 @Component({
     selector: 'p-toast',
     template: `
-        <div #container [ngClass]="'p-toast p-component p-toast-' + position" [ngStyle]="style" [class]="styleClass">
+        <div #container class="p-toast p-component" [ngClass]="'p-toast-' + _position" [ngStyle]="style" [class]="styleClass">
             <p-toastItem
                 *ngFor="let msg of messages; let i = index"
                 [message]="msg"
@@ -247,11 +254,20 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy {
      * @group Props
      */
     @Input() styleClass: string | undefined;
+
     /**
      * Position of the toast in viewport.
      * @group Props
      */
-    @Input() position: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center' = 'top-right';
+    @Input() get position(): ToastPositionType {
+        return this._position;
+    }
+
+    set position(value: ToastPositionType) {
+        this._position = value;
+        this.cd.markForCheck();
+    }
+
     /**
      * It does not add the new message if there is already a toast displayed with the same content
      * @group Props
@@ -308,6 +324,8 @@ export class Toast implements OnInit, AfterContentInit, OnDestroy {
 
     template: TemplateRef<any> | undefined;
 
+    _position: ToastPositionType = 'top-right';
+
     constructor(@Inject(DOCUMENT) private document: Document, private renderer: Renderer2, public messageService: MessageService, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {}
 
     styleElement: any;