if-platform-directives.ts

import {Directive, ViewContainerRef, TemplateRef, Inject} from '@angular/core';
import {Device, platformNames} from "platform";
import {DEVICE} from "nativescript-angular/platform-providers";

@Directive({ selector: "[ifAndroid]" })
export class IfAndroidDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.android) {
            container.createEmbeddedView(templateRef);
        }
    }
}

@Directive({ selector: "[ifIos]" })
export class IfIosDirective {
    constructor( @Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
        if (device.os === platformNames.ios) {
            container.createEmbeddedView(templateRef);
        }
    }
}

usage.html

 <ActionBar title="test">
	<ActionItem text="android" *ifAndroid></ActionItem>          
	<ActionItem text="ios" *ifIos></ActionItem>     
 </ActionBar>

Hey there, I am trying to implement *ifAndroid and *ifIos directives into my dashboard.component.ts component but it is not working, I added the ts code inside my dashboard.component.ts and using *ifIos/*ifAndroid in my html file but no luck. Do I have to create different files for the ts code and then import into my dashboard.component.ts component?

Thanks!

in ngModule you have to add these as declarations

There is a problem with this approach. It is not rendering icons.

<ActionBar title="vCard">
   <NavigationButton icon="res://ic_menu" *ifAndroid text="Menu"></NavigationButton>
   <ActionItem icon="res://ic_menu" ios.position="left" *ifIso text="Menu"></ActionItem>
</ActionBar>

For above code it is not rendering the icons.

Still doesn't render any icons however.