Feature: Grouping - Allows users to group toasts into 1 toast

CHANGELOG.md

@@ -1,3 +1,24 @@
+# [2.0.0-beta.1](https://github.com/ngxpert/hot-toast/compare/v1.0.0...v2.0.0-beta.1) (2024-04-17)
+
+
+### Bug Fixes
+
+* handle expanded in doCheck ([58a188a](https://github.com/ngxpert/hot-toast/commit/58a188a2b976fc43295f92858897700b0c9836d5))
+* make options optional in show function ([8ecbbc2](https://github.com/ngxpert/hot-toast/commit/8ecbbc2a3c10b6e3006debd5aad7e304c7984d71))
+
+
+### Features
+
+* add grouping feature ([c342de6](https://github.com/ngxpert/hot-toast/commit/c342de69adcf246a30e51f01c5a411a822756e3e))
+* post grouping ([bc32842](https://github.com/ngxpert/hot-toast/commit/bc32842f04b7f997cbefb98d2ad217941652b2bb))
+* remove first child div from .hot-toast-message ([8b7b09f](https://github.com/ngxpert/hot-toast/commit/8b7b09f50e9e1f9189a6a562415e849da1df3f13))
+
+
+### BREAKING CHANGES
+
+* a div around ng-container in .hot-toast-message has been removed. User will need to
+take care of this in their ng-template
+
 # 1.0.0 (2024-02-19)
 
 

package.json

@@ -38,6 +38,7 @@
   },
   "dependencies": {
     "@angular/animations": "^17.1.3",
+    "@angular/cdk": "~17.3.4",
     "@angular/common": "^17.1.3",
     "@angular/compiler": "^17.1.3",
     "@angular/core": "^17.1.3",
@@ -46,6 +47,7 @@
     "@angular/platform-browser-dynamic": "^17.1.3",
     "@angular/router": "^17.1.3",
     "@ngneat/overview": "6.0.0",
+    "@ngxpert/cmdk": "^1.0.0",
     "prismjs": "^1.23.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
@@ -116,4 +118,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

projects/ngxpert/hot-toast/src/lib/components/hot-toast-container/hot-toast-container.component.html

@@ -1,7 +1,7 @@
 <div style="position: fixed; z-index: 9999; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none">
   <div style="position: relative; height: 100%">
     <div>
-      @for (toast of toasts; track trackById(i, toast); let i = $index) {
+      @for (toast of toasts; track trackById(i, toast); let i = $index) { @if (toast.group?.parent) {} @else {
       <hot-toast
         [toast]="toast"
         [offset]="calculateOffset(toast.id, toast.position)"
@@ -13,8 +13,9 @@
         (height)="updateHeight($event, toast)"
         (beforeClosed)="beforeClosed(toast)"
         (afterClosed)="afterClosed($event)"
+        (toggleGroup)="toggleGroup($event)"
       ></hot-toast>
-      }
+      } }
     </div>
   </div>
 </div>