Nativscript platform specific template not working - nativescript

Question

Building an app in Nativescript 5.0 for both Android and iOS. For some reason the and tags don't seem to work as they should, or i might be doing it wrong.
<StackLayout>
<android>
<ActionBar class="header" flat="true">
<StackLayout orientation="vertical">
<app-eon-colors-top></app-eon-colors-top>
<GridLayout columns="auto, *, auto, auto" rows="2*">
<Label class="title" col="0" text="{{title}}" verticalAlignment="center"></Label>
<Label class="icon fa-solid" col="2" text="" verticalAlignment="center"></Label>
<Label class="logout fa-solid" col="3" row="0" text="Logga ut" verticalAlignment="center" (tap)="logout()"></Label>
</GridLayout>
</StackLayout>
</ActionBar>
</android>
<ios>
<ActionBar class="header" flat="false">
<StackLayout orientation="horizontal">
<Label class="title" text="{{title}}"></Label>
</StackLayout>
<ActionItem ios.position="right">
<StackLayout orientation="horizontal">
<Label class="icon fa-solid" text=""></Label>
<Label class="logout fa-solid" ios.position="right" text="Logga ut" (tap)="logout()"></Label>
</StackLayout>
</ActionItem>
</ActionBar>
</ios>
</StackLayout>
When running this template on android it only uses the code in the ios block, but on ios it seems to work fine.

Answer 1

That's NativeScript Core way of writing platform specific XML. With Angular, you could use directives, there is a Github issue that discusses about this problem and also provides sample code to implement this platform specific directive on your project.
Platform specific structural directive
import { Directive, ViewContainerRef, TemplateRef, Inject } from "#angular/core";
import { DEVICE } from "nativescript-angular/platform-providers";
import { Device, platformNames } from "platform";
#Directive({
selector: "[appIfAndroid]"
})
export class IfAndroidDirective {
constructor( #Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
if (device.os === platformNames.android) {
container.createEmbeddedView(templateRef);
}
}
}
#Directive({
selector: "[appIfIos]"
})
export class IfIosDirective {
constructor( #Inject(DEVICE) device: Device, container: ViewContainerRef, templateRef: TemplateRef<Object>) {
if (device.os === platformNames.ios) {
container.createEmbeddedView(templateRef);
}
}
}
Once you import this directive in your module, then you could use *appIfAndroid / *appIfIos on any tag.