fixup

Author: splincode

projects/table-builder/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@angular-ru/ng-table-builder",
-    "version": "0.35.0",
+    "version": "0.36.0",
     "license": "MIT",
     "bugs": {
         "url": "https://github.com/Angular-RU/ng-table-builder/issues"

projects/table-builder/src/lib/table/directives/observer-view.directive.ts

@@ -2,31 +2,33 @@ import { AfterViewInit, Directive, ElementRef, EventEmitter, NgZone, OnDestroy,
 
 @Directive({ selector: '[observerView]' })
 export class ObserverViewDirective implements AfterViewInit, OnDestroy {
-    @Output() public observeVisible: EventEmitter<boolean> = new EventEmitter();
+    @Output() public observeVisible: EventEmitter<boolean> = new EventEmitter(true);
     private observer: IntersectionObserver = null;
     private previousRation: number = 0.0;
     private frameId: number;
 
     constructor(private element: ElementRef, private readonly ngZone: NgZone) {}
 
     public ngAfterViewInit(): void {
-        this.observer = new IntersectionObserver(
-            (entries: IntersectionObserverEntry[]): void => {
-                entries.forEach(
-                    (entry: IntersectionObserverEntry): void => {
-                        this.ngZone.runOutsideAngular((): void => this.observeChange(entry));
-                        this.previousRation = entry.intersectionRatio;
-                    }
-                );
-            },
-            {
-                root: null,
-                rootMargin: '0px 0px 0px 0px',
-                threshold: [0]
-            }
-        );
+        this.ngZone.runOutsideAngular(() => {
+            this.observer = new IntersectionObserver(
+                (entries: IntersectionObserverEntry[]): void => {
+                    entries.forEach(
+                        (entry: IntersectionObserverEntry): void => {
+                            this.ngZone.runOutsideAngular((): void => this.observeChange(entry));
+                            this.previousRation = entry.intersectionRatio;
+                        }
+                    );
+                },
+                {
+                    root: null,
+                    rootMargin: '0px 0px 0px 0px',
+                    threshold: [0]
+                }
+            );
 
-        this.observer.observe(this.element.nativeElement);
+            this.observer.observe(this.element.nativeElement);
+        });
     }
 
     public ngOnDestroy(): void {

src/app/samples/sample-eleven/sample-eleven.component.html

@@ -64,17 +64,26 @@
 
                                 <ngx-context-menu-item>
                                     <ngx-menu-content icon></ngx-menu-content>
-                                    <ngx-menu-content>Column list</ngx-menu-content>
+                                    <ngx-menu-content>Column settings</ngx-menu-content>
 
-                                    <ngx-context-menu-item
-                                        *ngFor="let column of table1.columnSchema"
-                                        (onClick)="table1.toggleColumnVisibility(column.key); $event.preventDefault()"
-                                        [visible]="column.isModel"
-                                    >
-                                        <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
-                                        <ngx-menu-content no-margin align-center>
-                                            <mat-checkbox color="primary" [checked]="column.isVisible"></mat-checkbox>
-                                        </ngx-menu-content>
+                                    <ngx-context-menu-item>
+                                        <ngx-menu-content>List</ngx-menu-content>
+
+                                        <ngx-context-menu-item
+                                            *ngFor="let column of table1.columnSchema"
+                                            (onClick)="
+                                                table1.toggleColumnVisibility(column.key); $event.preventDefault()
+                                            "
+                                            [visible]="column.isModel"
+                                        >
+                                            <ngx-menu-content no-margin>{{ column.key }}</ngx-menu-content>
+                                            <ngx-menu-content no-margin align-center>
+                                                <mat-checkbox
+                                                    color="primary"
+                                                    [checked]="column.isVisible"
+                                                ></mat-checkbox>
+                                            </ngx-menu-content>
+                                        </ngx-context-menu-item>
                                     </ngx-context-menu-item>
                                 </ngx-context-menu-item>