CODEWITHSUNDEEP
angularangular2-routingnativescript
nitheism
nitheism

Reputation: 547

Nativescript + Angular Segmented bar can't route to other components?

I am trying to use a SegmentedBar to visualize 2 types of forms that are in a different components, if I remove the part with the routing to the components everything works fine and the bar itself visualizes, but with the routing part even the bar does not visualize and is just blank.

One of the components the other is similar:

<ScrollView>

    <StackLayout>

        <TextField [text]="first_name" hint="First Name" class="purplish label-marg"></TextField>

        <TextField [text]="last_name" hint="Last Name" class="purplish label-marg"></TextField>

        <TextField [text]="email" hint="Email" class="purplish label-marg"></TextField>

        <TextField [text]="company_name" hint="Company name" class="purplish label-marg"></TextField>

        <TextField [text]="company_position" hint="Position in company" class="purplish label-marg"></TextField>

        <Label text="Company size" class="purpish label-marg font-weight-bold"></Label>
        <ListPicker [items]="sizes"
                    [text]="company_size" class="p-15" ngDefaultControl>
        </ListPicker>

        <TextField [text]="company_resume" textWrap="true" hint="Company resume" class="purplish label-marg"></TextField>

        <TextField [text]="year_of_creation" hint="Year of creation of the company" class="purplish label-marg"></TextField>

        <Label text="Branch of the company" class="purpish label-marg font-weight-bold"></Label>
        <ListPicker [items]="branches"
                    [text]="branch_company" class="p-15" ngDefaultControl>
        </ListPicker>

        <Label text="Country" class="purpish label-marg font-weight-bold"></Label>
        <ListPicker [items]="countries" [text]="country" class="p-15" ngDefaultControl>
        </ListPicker>


        <TextField [text]="city" hint="City" class="purplish label-marg"></TextField>

        <Label text="You can add job opening in your profile" class="purpish" margin-left="20px"></Label>

    </StackLayout>


</ScrollView>

The SegmentedBar component xml/html:

<basictoolbar></basictoolbar>
<StackLayout>
   <SegmentedBar #sb [items]="navItems" selectedIndex="0" (selectedIndexChange)="navigate(sb.selectedIndex)">   

   </SegmentedBar>

   <router-outlet></router-outlet>    
</StackLayout>

And the ts:

import { Component} from '@angular/core';
import { SegmentedBar, SegmentedBarItem } from "ui/segmented-bar";
import { Router } from '@angular/router';
import {ChangeDetectorRef,ApplicationRef} from '@angular/core';

@Component({
    selector: 'cvformpage',
    templateUrl: './components/cvformpage/cvformpage.component.html'
})

export class CvformpageComponent {

    public navItems: Array<SegmentedBarItem>;

        public constructor(private router: Router, private _applicationRef: ApplicationRef,private ref:ChangeDetectorRef) {
            this.navItems = [];           
            this.navItems.push(this.createSegmentedBarItem("Employer Form"));
            this.navItems.push(this.createSegmentedBarItem("Employee Form"));           


        }

        private createSegmentedBarItem(title: string): SegmentedBarItem {
            let item: SegmentedBarItem = new SegmentedBarItem();
            item.title = title;           
            return item;
        }

        public navigate(index: number) {
            switch(index) {
                case 0:
                    console.log("I am here");                    
                    this.router.navigate(["/employer-form"]);
                    break;
                case 1:
                    this.router.navigate(["/employee-form"]);
                    break;
            }
        }

}

I tried it with console log and it gets inside the switch and inside the right case, but something get's messed up with the routing. I thank you in advance guys if someone can help me on the right way to do it.

Upvotes: 0

Views: 341

Answers (1)

nitheism
nitheism

Reputation: 547

I found the solution for the problem after sometime, I realized that TabView is the better way to go, anyway I tried TabView with routing on item change and it won't work. Because basically what happens:

1. I render a page with the tabs

2.Then I try to route to another component

3. This confuses nativescript, because routing tries to change the whole page to another, while the concept of TabView or SegmentedBar is quite different and it supposes that the view should stay in the "scope" in other words it should be attached to the TabView, but instead it tries to "dominate"

So the simple solution using TabView because of TabView vs SegmentedBar question is as simple as to put the component/view selectors of my components in the tabview's view like this:

   <basictoolbar></basictoolbar>

    <TabView #tabView  >
      <StackLayout *tabItem="{title:'Employer Form'}">
          <employer-form></employer-form>
      </StackLayout>
      <StackLayout *tabItem="{title:'Employee Form'}">
          <employee-form></employee-form>
      </StackLayout>
    </TabView>

Upvotes: 1

Related Questions