chore: separate filter components (#12)

Author: NathanWalker

packages/angular/src/lib/cdk/platform-filters/android-filter.component.ts

@@ -0,0 +1,16 @@
+/* eslint-disable @angular-eslint/component-selector */
+import { Component, Inject } from '@angular/core';
+import { platformNames, IDevice } 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: IDevice) {
+    this.show = device.os === platformNames.android;
+  }
+}

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

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

packages/angular/src/lib/cdk/platform-filters/ios-filter.component.ts

@@ -6,9 +6,10 @@ 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';
+import { AndroidFilterComponent } from './cdk/platform-filters/android-filter.component';
+import { IOSFilterComponent } from './cdk/platform-filters/ios-filter.component';
 
-const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective, ListViewComponent, TemplateKeyDirective, TabViewDirective, TabViewItemDirective, AndroidFilterComponent, IosFilterComponent];
+const CDK_COMPONENTS = [ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective, ListViewComponent, TemplateKeyDirective, TabViewDirective, TabViewItemDirective, AndroidFilterComponent, IOSFilterComponent];
 
 registerNativeScriptViewComponents();
 

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

@@ -14,7 +14,8 @@ 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 './cdk/platform-filters/android-filter.component';
+export * from './cdk/platform-filters/ios-filter.component';
 export * from './file-system';
 export * from './nativescript-common.module';
 export * from './loading.service';

packages/angular/src/lib/public_api.ts

@@ -1,6 +1,5 @@
 import { InjectionToken } from '@angular/core';
-import { Page, View } from '@nativescript/core';
-import { Device } from '@nativescript/core';
+import { IDevice, Page, View } from '@nativescript/core';
 
 export const APP_ROOT_VIEW = new InjectionToken<View>('NativeScriptAppRootView');
 export const NATIVESCRIPT_ROOT_MODULE_ID = new InjectionToken<string | number>('NativeScriptRootModuleId');
@@ -18,7 +17,7 @@ export interface PageFactoryOptions {
 }
 
 export const DISABLE_ROOT_VIEW_HANDLING = new InjectionToken<boolean>('NativeScriptDisableRootViewHandling');
-export const DEVICE = new InjectionToken<typeof Device>('NativeScriptDevice');
+export const DEVICE = new InjectionToken<IDevice>('NativeScriptDevice');
 export const PAGE_FACTORY = new InjectionToken<PageFactory>('NativeScriptPageFactory');
 export const defaultPageFactory: PageFactory = function (_opts: PageFactoryOptions) {
   return new Page();