Search code examples
componentsnativescriptangular2-nativescript

Is there a way to embed angular components in NativeScript like you can in HTML

I am trying to convert an Angular website to an android app using NativeScript. Using HTML, I was able to Embed a component simply with:

<app-someComponent></app-someComponent>

However, with Nativescript nothing happens. Is this possible in NativeScript or do I need to look into using routing? Currently only the actionBar is showing, but if I remove <app-national-data></app-national-data> and <app-state-data></app-state-data>, then the tabView shows correctly.

home.component.tns.html

<ActionBar [title]="title"></ActionBar>

<TabView selectedIndex="0" (selectedIndexChanged)="onSelectedIndexchanged($event)">
  <StackLayout *tabItem="{title: 'National', iconSource: 'res://icon'}">
    <StackLayout>
        <Label text="National Data " textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
        <app-national-data></app-national-data>
    </StackLayout>
  </StackLayout>
  <StackLayout *tabItem="{title: 'State', iconSource: 'res://icon'}">
    <StackLayout>
        <Label text="State Data" textWrap="true" class="m-15 h2 text-left" color="blue"></Label>
        <app-state-data></app-state-data>
    </StackLayout>
  </StackLayout>
</TabView>
Solution

  • simply using <app-someComponent></app-someComponent> does have the same effect with NativeScript as it does in HTML.

    The issue was a result of an unrelated error in a service being used by the component. The Error was not allowing the component to be displayed. Testing using tns debug android instead of using tns run android made it easy to find the issue.

    Hope my rookie mistake can save someone else some time.