Add events item-added-to-dom and item-displayed #11703

Author: sambaptista

projects/angular-natural-gallery/src/lib/natural-gallery/natural-gallery.component.ts

@@ -15,6 +15,8 @@ export class NaturalGalleryComponent<T extends ModelAttributes = ModelAttributes
     // eslint-disable-next-line @angular-eslint/no-output-native
     public readonly select = output<CustomEventDetailMap<T>['select']>();
     public readonly pagination = output<CustomEventDetailMap<T>['pagination']>();
+    public readonly itemAddedToDom = output<CustomEventDetailMap<T>['item-added-to-dom']>();
+    public readonly itemDisplayed = output<CustomEventDetailMap<T>['item-displayed']>();
 
     private readonly galleryElement = viewChild.required<ElementRef<HTMLElement>>('gallery');
 
@@ -52,6 +54,14 @@ export class NaturalGalleryComponent<T extends ModelAttributes = ModelAttributes
                 this.pagination.emit(ev.detail);
             });
 
+            gallery.addEventListener('item-added-to-dom', ev => {
+                this.itemAddedToDom.emit(ev.detail);
+            });
+
+            gallery.addEventListener('item-displayed', ev => {
+                this.itemDisplayed.emit(ev.detail);
+            });
+
             if (this._items.length) {
                 gallery.setItems(this._items);
             }

src/app/app.component.html

@@ -10,4 +10,5 @@
     (pagination)="log('pagination', $event)"
     (activate)="log('activate', $event)"
     (select)="log('select', $event)"
+    (itemAddedToDom)="log('item-added-to-dom', $event)"
 />