Can I have two HTML files (Android & iOS) for one page?


#1

Can I include two html files(one for iOS and one for Android) in a component page?
Basically, I have a component page that has a HTML element TabView. I want my Android version of the page to use this element, but I also need my iOS version of the same page to use something else. Is that possible? Can I include multiple templateUrl in my component.ts file?


#2

I use something like this in my app:

https://docs.nativescript.org/angular/code-samples/ui/ng-directives.html

You can add something like *ifAndroid to the XML component and it would only show if you’re using Android, likewise with iOS.


#3

You can separate platform-specific files by adding a certain suffix to each file before “.xml”. For instance, you would want to name these pages to:

  • main-page.android.xml
  • main-page.ios.xml

When building/running the project for each platform, only the corresponding XML file will pass the building process and become “main-page.xml”.

Is this what you were looking for?


#4

So for the Angular 2 version we only have the directive option?

Thanks,
Dem


#5

@demetrio812 I have an app with this component:

@Component({
  selector: "article-item",
  moduleId: module.id,
  templateUrl: "article-item.html",
  styleUrls: ["article-item-common.css", "article-item.css"]
})

And the folder contains article-item.android.html and article-item.ios.html (no article-item.html).


#6

That’s strange, I’ve tried it but it wasn’t working, I’ll clean everything and try again…will write here later on

Thanks!


#7

I’ve removed the platforms folder and built again and it’s working now!

Thanks a lot!