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


#1

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'}">
      <Home></Home>
   </StackLayout>
   <ng-container *ngIf="loginService.isAuthorized">
      <StackLayout *tabItem="{title: 'Hírek'}">
         <News></News>
      </StackLayout>
      <StackLayout *tabItem="{title: 'Csomagok'}">
         <Packages></Packages>
      </StackLayout>
      <ng-container *ngIf="loginService.loggedInUser.role == Role.Admin">
         <StackLayout *tabItem="{title: 'Felhasználók'}">
            <Users></Users>
         </StackLayout>
      </ng-container>
   </ng-container>
</TabView>

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.


#2

Try setting the tabItems itself programatically.


#3

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.


#4

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


#5

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