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


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?


I use something like this in my app:

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


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.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?


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



@demetrio812 I have an app with this component:

  selector: "article-item",
  templateUrl: "article-item.html",
  styleUrls: ["article-item-common.css", "article-item.css"]

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


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



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

Thanks a lot!