feat(cdk): add rxIfList-directive

#29

libs/cdk/project.json

@@ -49,7 +49,9 @@
           "libs/cdk/token/**/*.ts",
           "libs/cdk/token/**/*.html",
           "libs/cdk/lazy/**/*.ts",
-          "libs/cdk/lazy/**/*.html"
+          "libs/cdk/lazy/**/*.html",
+          "libs/cdk/template/**/*.ts",
+          "libs/cdk/template/**/*.html"
         ]
       }
     },

libs/cdk/template/README.md

@@ -0,0 +1,9 @@
+# @angular-kit/cdk/template
+
+A package providing some useful Angular ehancements for templates.
+
+##  🔋 Included
+* `*rxIfList` - `*ngIf` for lists.
+
+### `rxIfList`
+

libs/cdk/template/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/cdk/template/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/rx-if-list/rx-if-list.directive';

libs/cdk/template/src/lib/rx-if-list/rx-if-list.directive.spec.ts

@@ -0,0 +1,50 @@
+import {RxIfListDirective, RxIfListDirectiveModule} from './rx-if-list.directive';
+import {TestBed} from '@angular/core/testing';
+import {Component} from '@angular/core';
+
+describe('RxIfListDirective', () => {
+  it('should create an instance of test host', async () => {
+    const { component } = await setup(`<div *rxIfList="[]"></div>`);
+    expect(component).toBeTruthy();
+  });
+
+  it('should not render template when array is empty', async () => {
+    const { fixture } = await setup(`<div *rxIfList="[]"></div>`);
+    expect(fixture.nativeElement.innerHTML).not.toContain('<div></div>');
+  });
+
+  it('should not render template when array is null', async () => {
+    const { fixture } = await setup(`<div *rxIfList="null"></div>`);
+    expect(fixture.nativeElement.innerHTML).not.toContain('<div></div>');
+  });
+
+  it('should not render template when array is undefined', async () => {
+    const { fixture } = await setup(`<div *rxIfList="undefined"></div>`);
+    expect(fixture.nativeElement.innerHTML).not.toContain('<div></div>');
+  });
+
+  it('should render template when array is not empty', async () => {
+    const { fixture } = await setup(`<div *rxIfList="['a']"></div>`);
+    expect(fixture.nativeElement.innerHTML).toContain('<div></div>');
+  });
+});
+
+async function setup(template: string) {
+  @Component({
+    template,
+  })
+  class TestHostComponent {}
+
+  await TestBed.configureTestingModule({
+    declarations: [TestHostComponent],
+    imports: [RxIfListDirectiveModule],
+    //providers: [RxIfListDirective]
+  }).compileComponents();
+
+  //const rxIfListDirective = TestBed.inject(RxIfListDirective);
+  const fixture = TestBed.createComponent(TestHostComponent);
+  const component = fixture.componentInstance;
+  fixture.detectChanges();
+
+  return { fixture, component };
+}

libs/cdk/template/src/lib/rx-if-list/rx-if-list.directive.ts

@@ -0,0 +1,25 @@
+import {Directive, Input, NgModule, TemplateRef, ViewContainerRef} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+@Directive({
+  selector: '[rxIfList]',
+})
+export class RxIfListDirective {
+  @Input() set rxIfList(value: ArrayLike<unknown> | null | undefined) {
+    this.vcr.clear();
+    if ((value?.length ?? []) > 0) {
+      this.vcr.createEmbeddedView(this.tpl);
+    }
+  }
+  constructor(
+    private readonly vcr: ViewContainerRef,
+    private readonly tpl: TemplateRef<unknown>
+  ) {}
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [RxIfListDirective],
+  exports: [RxIfListDirective],
+})
+export class RxIfListDirectiveModule {}

tsconfig.base.json

@@ -21,6 +21,7 @@
       "@angular-kit/cdk/memoize": ["libs/cdk/memoize/src/index.ts"],
       "@angular-kit/cdk/pipes": ["libs/cdk/pipes/src/index.ts"],
       "@angular-kit/cdk/supported": ["libs/cdk/supported/src/index.ts"],
+      "@angular-kit/cdk/template": ["libs/cdk/template/src/index.ts"],
       "@angular-kit/cdk/token": ["libs/cdk/token/src/index.ts"],
       "@angular-kit/cdk/types": ["libs/cdk/types/src/index.ts"],
       "@angular-kit/rx": ["libs/rx/src/index.ts"],