How to create a new Component which is added to a StackLayout?


Hi guys!

I am trying to develop a little app in NativeScript with Angular. I used a TabView with a component for each Tab. At first i used the Angular directive (*ngIf) to control the visibility of these tabs:

<TabView (selectedIndexChanged)="onSelectedIndexChanged($event)">
   <StackLayout *tabItem="{title: 'Kezdőlap'}">
   <ng-container *ngIf="loginService.isAuthorized">
      <StackLayout *tabItem="{title: 'Hírek'}">
      <StackLayout *tabItem="{title: 'Csomagok'}">
      <ng-container *ngIf="loginService.loggedInUser.role == Role.Admin">
         <StackLayout *tabItem="{title: 'Felhasználók'}">

First, this isAuthorized variable is false and when I change it to true, all of the Tabs appear. BUT after I change back the isAuthorized value to false, i got an error:

Error: View not added to this instance. View: CommentNode(51) CurrentParent: undefined ExpectedParent: TabView(424)

After a little Google, I found this BugReport and in it stated that I cannot remove Tabs with Angular directives only rebind all of the Tabs programatically.

And here comes my problem. I don’t know, how to instantiate an Angular component (Home, News, Package, Users) which can be inserted into a StackLayout programatically.


Try setting the tabItems itself programatically.


Yeah, I want to do that.
The problem is (as I stated in the last paragraph) I cannot know how to instantiate an Angular component which can be attached to a StackLayout, because the StackLayout addChild and insertChild method only accepts a View object.


In Angular you use ComponentFactoryResolver and ViewContainerRef to dynamically create and inject components.


In the end I just created another Component for the Tabs, which I needed. In this way I could bypass the original problem.