How to instantiate/create an existing Component which can be added to a StackLayout programatically?

[92Arbiter]

Hi guys!

This issue will be a question rather than a bug (I think), but I dont know where to get appropriate answer for my problem.

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, the 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.

I know I must provide an array for the TabView component with the content, but I can't figure it out, how to instantiate an Angular component (Home, News, Package, Users) which can be inserted into a StackLayout programatically (which is the root of each Tab). [As I discovered, the StackLayouts addChild and insertChild method only accepts a View, but I could only generate a ComponentRef<> with Angular]

I want to ask that is this possible or I must extract the content of each component and add them one-by-one to the StackLayout?

If it is possible, can you show me an example for this?

Thanks for the help!

[pacome2017]

I'm facing the same problem. I want to show/hide a TabViewItem in some cases, based on the bug report you've linked, it is not possible with angular directives and we should create the views in the typescript files. It works fine for simple layouts I guess, but my layouts have directives or variable items in them I don't know how to add that in a typescript file ... For example :

` <StackLayout *tabItem="{title: 'Text'}">

<ScrollView>

    <StackLayout *ngFor="let item of docText">

        <label [text]="item.value" [visibility]="textVisibility"></label>

    </StackLayout>

</ScrollView>

`

I don't know how to add *ngFor directive to the StackLayout after, let docStackLayout = new StackLayout(); same for visibility, I could remove/add the label of the layout when I want but it's not convenient at all.

[tskweres]

I would like to do this as well. I want to create a custom modal / dialog, and add it to the root view of my page, any ideas?