Merge pull request UiPath#39 from UiPath/feature/ng_let_static_support

Feature / Allow ngLet content to be queried statically

Author: vladjerca

projects/angular/directives/src/ui-ng-let/ui-ng-let.directive.spec.ts

@@ -0,0 +1,128 @@
+import {
+  Component,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+} from '@angular/core/testing';
+
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+
+import { UiNgLetModule } from './ui-ng-let.module';
+
+describe('Directive: UiClipboard', () => {
+    @Component({
+        template: `
+            <ng-container *ngLet="data$ | async as data">
+                <div #child>
+                    <p>{{data?.value}}</p>
+                </div>
+            </ng-container>
+        `,
+    })
+    class NgLetStaticFixtureComponent {
+        @ViewChild('child', {
+            static: true,
+        })
+        public child!: ElementRef<HTMLDivElement>;
+
+        public data$ = of({
+            value: 'smth',
+        }).pipe(delay(100));
+    }
+    describe('QueryStrategy: static', () => {
+        let fixture: ComponentFixture<NgLetStaticFixtureComponent>;
+        let component: NgLetStaticFixtureComponent;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [
+                    UiNgLetModule,
+                ],
+                declarations: [
+                    NgLetStaticFixtureComponent,
+                ],
+            });
+            fixture = TestBed.createComponent(NgLetStaticFixtureComponent);
+            component = fixture.componentInstance;
+
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should allow the content to be queried onInit (static: true)', async () => {
+            expect(component.child).toBeDefined();
+
+            await fixture.whenStable();
+
+            expect(component.child.nativeElement.innerText).toEqual('');
+
+            fixture.detectChanges();
+
+            expect(component.child).toBeDefined();
+            expect(component.child.nativeElement.innerText).toEqual('smth');
+        });
+    });
+
+    @Component({
+        template: `
+            <ng-container *ngLet="data$ | async as data">
+                <div #child>
+                    <p>{{data?.value}}</p>
+                </div>
+            </ng-container>
+        `,
+    })
+    class NgLetDynamicFixtureComponent {
+        @ViewChild('child', {
+            static: false,
+        })
+        public child!: ElementRef<HTMLDivElement>;
+
+        public data$ = of({
+            value: 'smth',
+        }).pipe(delay(100));
+    }
+    describe('QueryStrategy: static', () => {
+        let fixture: ComponentFixture<NgLetDynamicFixtureComponent>;
+        let component: NgLetDynamicFixtureComponent;
+
+        beforeEach(() => {
+            TestBed.configureTestingModule({
+                imports: [
+                    UiNgLetModule,
+                ],
+                declarations: [
+                    NgLetDynamicFixtureComponent,
+                ],
+            });
+            fixture = TestBed.createComponent(NgLetDynamicFixtureComponent);
+            component = fixture.componentInstance;
+
+            fixture.detectChanges();
+        });
+
+        afterEach(() => {
+            fixture.destroy();
+        });
+
+        it('should allow the content to be queried on afterViewInit (static: false)', async () => {
+            expect(component.child).toBeDefined();
+
+            await fixture.whenStable();
+
+            expect(component.child.nativeElement.innerText).toEqual('');
+
+            fixture.detectChanges();
+
+            expect(component.child).toBeDefined();
+            expect(component.child.nativeElement.innerText).toEqual('smth');
+        });
+    });
+});

projects/angular/directives/src/ui-ng-let/ui-ng-let.directive.ts

@@ -1,9 +1,8 @@
 import {
-    Directive,
-    Input,
-    OnInit,
-    TemplateRef,
-    ViewContainerRef,
+  Directive,
+  Input,
+  TemplateRef,
+  ViewContainerRef,
 } from '@angular/core';
 
 /**
@@ -26,33 +25,28 @@ class NgLetContext {
     // tslint:disable-next-line: directive-selector
     selector: '[ngLet]',
 })
-export class UiNgLetDirective implements OnInit {
+export class UiNgLetDirective {
     private _context = new NgLetContext();
 
-  /**
-   * The context bound to the decorated area.
-   *
-   */
-  @Input()
+    /**
+     * The context bound to the decorated area.
+     *
+     */
+    @Input()
     set ngLet(value: any) {
         this._context.$implicit = this._context.ngLet = value;
     }
 
-  /**
-   * @ignore
-   */
-  constructor(
-      private _vcr: ViewContainerRef,
-      private _templateRef: TemplateRef<NgLetContext>,
-  ) { }
-
-  /**
-   * @ignore
-   */
-  ngOnInit() {
-      this._vcr.createEmbeddedView(
-          this._templateRef,
-          this._context,
-      );
-  }
+    /**
+     * @ignore
+     */
+    constructor(
+        private _vcr: ViewContainerRef,
+        private _templateRef: TemplateRef<NgLetContext>,
+    ) {
+        this._vcr.createEmbeddedView(
+            this._templateRef,
+            this._context,
+        );
+    }
 }