Platform filter directives

Author: vakrilov

ng-sample/app/app.ts

@@ -24,8 +24,9 @@ import {ImageTest} from "./examples/image/image-test";
 import {NavigationTest} from "./examples/navigation/navigation-test";
 import {ActionBarTest} from "./examples/action-bar/action-bar-test";
 import {ModalTest} from "./examples/modal/modal-test";
+import {PlatfromDirectivesTest} from "./examples/platform-directives/platform-directives-test";
 
-nativeScriptBootstrap(RendererTest);
+// nativeScriptBootstrap(RendererTest);
 //nativeScriptBootstrap(Benchmark);
 //nativeScriptBootstrap(ListTest);
 //nativeScriptBootstrap(ListTestAsync);
@@ -34,5 +35,6 @@ nativeScriptBootstrap(RendererTest);
 //nativeScriptBootstrap(ListTestAsync);
 //nativeScriptBootstrap(ImageTest);
 //nativeScriptBootstrap(NavigationTest, [NS_ROUTER_PROVIDERS]);
-//nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
+// nativeScriptBootstrap(ActionBarTest, [NS_ROUTER_PROVIDERS], { startPageActionBarHidden: false });
 // nativeScriptBootstrap(ModalTest);
+nativeScriptBootstrap(PlatfromDirectivesTest);

ng-sample/app/examples/platform-directives/platform-directives-test.ts

@@ -0,0 +1,19 @@
+import {Component, View} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+import { Page} from "ui/page";
+import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "../../nativescript-angular/router/ns-router";
+import {NS_DIRECTIVES} from "../../nativescript-angular/directives/ns-directives";
+
+@Component({
+    selector: 'action-bar-test',
+    template: `
+    <StackLayout>
+        <android><Label text="This is android specific content"></Label></android>
+        <ios><Label text="This is android specific content"></Label></ios>
+    </StackLayout>
+    `
+})
+export class PlatfromDirectivesTest {
+}
+
+

src/nativescript-angular/directives/ns-directives.ts

@@ -8,6 +8,7 @@ import {NumberValueAccessor} from '../value-accessors/number-value-accessor';
 import {SelectedIndexValueAccessor} from '../value-accessors/selectedIndex-value-accessor';
 import {TabViewDirective, TabViewItemDirective} from './tab-view';
 import {ActionBarComponent, ActionBarScope, ActionItemDirective, NavigationButtonDirective} from './action-bar';
+import {AndroidFilterComponent, IosFilterComponent} from './platform-filters';
 
 export const NS_DIRECTIVES: Type[] = [
     ListViewComponent,
@@ -22,5 +23,7 @@ export const NS_DIRECTIVES: Type[] = [
     ActionBarComponent,
     ActionBarScope,
     ActionItemDirective,
-    NavigationButtonDirective
+    NavigationButtonDirective,
+    AndroidFilterComponent,
+    IosFilterComponent
 ];

src/nativescript-angular/directives/platform-filters.ts

@@ -0,0 +1,18 @@
+import {Component} from 'angular2/core';
+import {device, platformNames} from "platform";
+
+@Component({
+    selector: "android",
+    template: `<ng-content *ngIf="show"></ng-content>`,
+})
+export class AndroidFilterComponent {
+    public show: boolean = device.os === platformNames.android;
+}
+
+@Component({
+    selector: "ios",
+    template: `<ng-content *ngIf="show"></ng-content>`,
+})
+export class IosFilterComponent {
+    public show: boolean = device.os === platformNames.ios;
+}