fix: platform filter directives (#11)

Author: edusperoni

apps/nativescript-demo-ng/package.json

@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@nativescript/android": "8.0.0",
-    "@nativescript/ios": "8.0.0"
+    "@nativescript/ios": "8.0.0",
+    "@nativescript/unit-test-runner": "^2.0.5"
   }
 }

apps/nativescript-demo-ng/src/tests/platform-filter-components.ts

@@ -35,6 +35,7 @@ export class PlatformSpecificAttributeComponent {
 const DECLARATIONS = [PlatformSpecificAttributeComponent, AndroidSpecificComponent, IosSpecificComponent];
 @NgModule({
   declarations: DECLARATIONS,
+  imports: [NativeScriptModule],
   schemas: [NO_ERRORS_SCHEMA],
 })
 export class PlatformModule {}
@@ -61,7 +62,8 @@ describe('Platform filter directives', () => {
       fixture.detectChanges();
       const componentRef = fixture.componentRef;
       const componentRoot = componentRef.instance.elementRef.nativeElement;
-      expect(dumpView(componentRoot, true).indexOf('Label') < 0).toBe(true);
+      console.log(dumpView(componentRoot, true));
+      expect(dumpView(componentRoot, true).indexOf('label') < 0).toBe(true);
     });
     it('applies iOS specific attribute', () => {
       const fixture = TestBed.createComponent(PlatformSpecificAttributeComponent);
@@ -94,7 +96,7 @@ describe('Platform filter directives', () => {
       fixture.detectChanges();
       const componentRef = fixture.componentRef;
       const componentRoot = componentRef.instance.elementRef.nativeElement;
-      expect(dumpView(componentRoot, true).indexOf('Label') < 0).toBe(true);
+      expect(dumpView(componentRoot, true).indexOf('label') < 0).toBe(true);
     });
     it('applies Android specific attribute', () => {
       const fixture = TestBed.createComponent(PlatformSpecificAttributeComponent);

apps/nativescript-demo-ng/tools/xplat-postinstall.js

@@ -14,9 +14,11 @@ try {
 }
 
 // Helpful to trigger ngcc after an install to ensure all has processed properly
-const child = childProcess.spawn(/^win/.test(process.platform) ? '..\\..\\node_modules\\.bin\\ngcc' : '../../node_modules/.bin/ngcc', ['--tsconfig', 'tsconfig.app.json', '--properties', 'es2015', 'module', 'main', '--first-only'], {
+const ngccPath = path.join('..', '..', 'node_modules', '.bin', 'ngcc');
+const child = childProcess.spawn(ngccPath, ['--tsconfig', 'tsconfig.app.json', '--properties', 'es2015', 'module', 'main', '--first-only'], {
   cwd: process.cwd(),
   stdio: 'inherit',
+  shell: process.platform == 'win32'
 });
 child.on('close', (code) => {
 

packages/angular/src/lib/cdk/platform-filters/index.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { Component, Inject } from '@angular/core';
+import { Device, platformNames } from '@nativescript/core';
+import { DEVICE } from '../../tokens';
+
+@Component({
+  selector: 'android',
+  template: `<ng-content *ngIf="show"></ng-content>`,
+})
+export class AndroidFilterComponent {
+  public show: boolean;
+
+  constructor(@Inject(DEVICE) device: typeof Device) {
+    this.show = device.os === platformNames.android;
+  }
+}
+
+@Component({
+  selector: 'ios',
+  template: `<ng-content *ngIf="show"></ng-content>`,
+})
+export class IosFilterComponent {
+  public show: boolean;
+  constructor(@Inject(DEVICE) device: typeof Device) {
+    console.log(device.os, platformNames.ios);
+    this.show = device.os === platformNames.ios;
+  }
+}

packages/angular/src/lib/nativescript-common.module.ts

@@ -6,8 +6,9 @@ import { ListViewComponent, TemplateKeyDirective } from './cdk/list-view/list-vi
 import { registerNativeScriptViewComponents } from './element-registry';
 import { ModalDialogService } from './legacy/directives/dialogs';
 import { TabViewDirective, TabViewItemDirective } from './cdk/tab-view';
+import { AndroidFilterComponent, IosFilterComponent } from './cdk/platform-filters';
 
-const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective, ListViewComponent, TemplateKeyDirective, TabViewDirective, TabViewItemDirective];
+const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective, ListViewComponent, TemplateKeyDirective, TabViewDirective, TabViewItemDirective, AndroidFilterComponent, IosFilterComponent];
 
 registerNativeScriptViewComponents();
 

packages/angular/src/lib/public_api.ts

@@ -14,6 +14,7 @@ export * from './cdk/list-view';
 export * from './cdk/portal';
 export * from './cdk/dialog';
 export * from './cdk/tab-view';
+export * from './cdk/platform-filters';
 export * from './file-system';
 export * from './nativescript-common.module';
 export * from './loading.service';