feat(core): added new syntax for init: *init="EXPRESSION as variable"

Author: thekiba

projects/platform/src/lib/directives/init.directive.ts

@@ -1,23 +1,27 @@
 import { Directive, EmbeddedViewRef, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
 
-interface InitContext {
-  $implicit: any;
+interface InitContext<T> {
+  $implicit: T;
+  init: T;
 }
 
 @Directive({ selector: '[init]' })
-export class InitDirective implements OnDestroy {
+export class InitDirective<T> implements OnDestroy {
 
-  @Input() set initOf(value: any) {
-    this.context.$implicit = value;
-    this.viewRef.markForCheck();
+  @Input() set init(value: T) {
+    this.setValue(value);
   }
 
-  private context: InitContext = { $implicit: null };
-  private viewRef: EmbeddedViewRef<InitContext> =
+  @Input() set initOf(value: T) {
+    this.setValue(value);
+  }
+
+  private context: InitContext<T> = { $implicit: null, init: null };
+  private viewRef: EmbeddedViewRef<InitContext<T>> =
     this.viewContainer.createEmbeddedView(this.templateRef, this.context);
 
   constructor(
-    private templateRef: TemplateRef<InitContext>,
+    private templateRef: TemplateRef<InitContext<T>>,
     private viewContainer: ViewContainerRef
   ) {}
 
@@ -29,4 +33,11 @@ export class InitDirective implements OnDestroy {
     }
   }
 
+  private setValue(value: T): void {
+    this.context.$implicit = this.context.init = value;
+    if (this.viewRef) {
+      this.viewRef.markForCheck();
+    }
+  }
+
 }

projects/platform/src/test/directives/init.directive.spec.ts

@@ -15,20 +15,38 @@ describe('InitDirective', () => {
     host: Host
   });
 
-  it('should create variable through template', () => {
-    host = create(`<ng-container *init="let variable of '${VALUE_IN_TEMPLATE}'">{{ variable }}</ng-container>`);
+  describe('using letOf', () => {
+    it('should create variable through template', () => {
+      host = create(`<ng-container *init="let variable of '${VALUE_IN_TEMPLATE}'">{{ variable }}</ng-container>`);
 
-    expect(host.hostElement).toHaveText(VALUE_IN_TEMPLATE);
+      expect(host.hostElement).toHaveText(VALUE_IN_TEMPLATE);
+    });
+
+    it('should create variable through binding', () => {
+      host = create(`<ng-container *init="let variable of example">{{ variable }}</ng-container>`);
+
+      expect(host.hostElement).not.toHaveText(VALUE_THROUGH_BINDING);
+
+      host.setHostInput({ example: VALUE_THROUGH_BINDING });
+      expect(host.hostElement).toHaveText(VALUE_THROUGH_BINDING);
+    });
   });
 
-  it('should create variable through binding', () => {
-    host = create(`<ng-container *init="let variable of example">{{ variable }}</ng-container>`);
+  describe('using as', () => {
+    it('should create variable through template', () => {
+      host = create(`<ng-container *init="'${VALUE_IN_TEMPLATE}' as variable">{{ variable }}</ng-container>`);
+
+      expect(host.hostElement).toHaveText(VALUE_IN_TEMPLATE);
+    });
 
-    expect(host.hostElement).not.toHaveText(VALUE_THROUGH_BINDING);
+    it('should create variable through binding', () => {
+      host = create(`<ng-container *init="example as variable">{{ variable }}</ng-container>`);
 
-    host.setHostInput({ example: VALUE_THROUGH_BINDING });
+      expect(host.hostElement).not.toHaveText(VALUE_THROUGH_BINDING);
 
-    expect(host.hostElement).toHaveText(VALUE_THROUGH_BINDING);
+      host.setHostInput({ example: VALUE_THROUGH_BINDING });
+      expect(host.hostElement).toHaveText(VALUE_THROUGH_BINDING);
+    });
   });
 
 });