Nativescript Angular ActionBar does not change between Child components

[soumen]

Hi
In my nativescript angular project in the Main Component I have two child components (TestComponent and Test1Component) each having two different implementations of an action bar in the two layouts. 

My problem is that when I navigate between the two child components the action bar does not change in the view.

However when I navigate outside the Main component to a different component (Test2 Component) and from there I return to any of the two child components the action bar displays correctly. Can someone tell me how to get the action bar to show correctly when navigating between the two child components. 

My Code is as follows:

app.routing.ts

        import { TestComponent } from "./test.component";
        import { AppComponent } from "./app.component";
        import { Test1Component } from "./test1.component";
        import { Test2Component } from "./test2.component";

        export const AppRoutes: any = [
    {
        path: "main", component: AppComponent,
        children: [
            { path: "0", component: TestComponent },
            { path: "1", component: Test1Component },
            { path: "", redirectTo: "0", pathMatch: "full" },
        ],
    },
    { path: "", redirectTo: "main", pathMatch: "full" },
    { path: "other", component: Test2Component, pathMatch: "full" },
        ];

Test and Test1 Component (the 2 child components)  look like this 

        import { Component } from '@angular/core';
        import { Router } from "@angular/router";

        @Component({
    selector: 'test1',
    templateUrl: `./test1.component.html`
        })
        export class Test1Component {

    constructor(private router: Router) {
        console.log("*********************** Now I am in test1 component *********************");
    }

    goToTest() {
        this.router.navigate(["/main/0"]);
    }

    goToOthers() {
        this.router.navigate(["/other"]);
    }
        }

The Html layout for both components is similar with different layouts in the action bar in each

Test1Component.html

        <StackLayout>
    <StackLayout sdkToggleNavButton>
        <ActionBar title="Welcome to Test 1" backgroundColor="#f82462" color="white">
        </ActionBar>
    </StackLayout>
    <StackLayout>
        <Label text="Hi," textWrap="true"></Label>
        <Label text="Hey I am Test-1, don't confuse with Test" textWrap="true"></Label>
        <Button text="Go To Test" (tap)="goToTest()"></Button>
        <Button text="Go To Other" (tap)="goToOthers()"></Button>
    </StackLayout>
</StackLayout>
        
Finally the parent layout is like this

        <GridLayout rows="*, auto">
    <StackLayout row="0" orientation="vertical">
        <Label text="demo text"></Label>
        <router-outlet></router-outlet>
    </StackLayout>

</GridLayout>        

You can also look at this issue in my githubrepo

[Nikolay Tsonev]

Hi,
Thank you for your interest in NativeScript.

If I understand you correctly you would like to use router-outlet and to have different ActionBars for every child component. 

I tested this scenario while using latest NativeScirpt and part of the code provided in the attached repository and this scenario seems to work as expected on both iOS and Android.

Something that could be related to your problem is the fact that you are wrapping the ActionBar inside a StackLayout in test1Component.html file instead of defining it at the top of the HTML file before adding the other components.

For you convenience, I am attaching sample project where the scenario with changing the ActionBar is shown, you could review it and verify, whether I am missing something for your case.

Something more that I could suggest is to upgrade your project to latest NativeScript 3.0.

Hope this information will help.

Regards,
nikolay.tsonev
Progress Telerik

[soumen]

Hi Nikolay,

Thanks for your reply, appreciate that you looked into my project. I applied your changes on my project but there was a problem.

The fix you have suggested works as long as i don't put a search bar into the action bar. However the moment I put a searchbar in test.component.html and navigate to test1 component through tab bar then it continues to show in Test1 component, even though there is no searchbar in test1.component.html.

I have made the changes you suggested in the same github project shared earlier. Please let  me know how I can change the action bar while there is a search bar in it.

Also currently there are some challenges with applying styling to the searchbar in NS 3. Hence I am waiting for the next release to upgrade my project.

 Thanks.

[Nikolay Tsonev]

Hi Soumen,

Could you provide some code sample, which shows how you are setting up the SearchBar inside the ActionBar? It would also help if you could provide information about the challenges, which you are facing with while applying the SearchBar styling.

I tested this case on my side and the SearchBar is rendered properly. I am attaching the sample project, which I used for testing.

Bear in mind that you should nested the SearchBar inside a GridLayout or to specify the width of the component, which will help to setup the correct dimensions for the element. Also while navigating in iOS the Back button will be shown and to avoid problems with the style you could set smaller width for the SearchBar or navigate while using clearHistory, which will disable the showing the Back button.

Regards,
nikolay.tsonev
Progress Telerik

[Anurag]

Hi Nikolay

I am working with Soumen on this project. Thanks for looking into our problem and sharing the archive.

As mentioned by Soumen we cannot  upgrade our project to NS 3.0 due to 

1. Challenges in styling the Searchbar as mentioned here 

2. Challenges in implementing animations as mentioned here

Because of these challenges we are not upgrading the project to NS 3.0

So to test the code you have shared we took the app folder from your archive and inserted it in a NS 2.5 project with package.json as follows

{
"description": "NativeScript Application",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "org.nativescript.sample",
"tns-ios": {
"version": "2.5.1"
},
"tns-android": {
"version": "2.5.1"
}
},
"dependencies": {
"@angular/common": "2.3.1",
"@angular/compiler": "2.3.1",
"@angular/core": "2.3.1",
"@angular/forms": "2.3.1",
"@angular/http": "2.3.1",
"@angular/platform-browser": "2.3.1",
"@angular/platform-browser-dynamic": "2.3.1",
"@angular/router": "3.3.1",
"nativescript-angular": "1.3.0",
"nativescript-bottombar": "^2.1.4",
"nativescript-theme-core": "^0.2.1",
"reflect-metadata": "~0.1.8",
"rxjs": "5.0.0-rc.4",
"tns-core-modules": "2.4.4"
},
"devDependencies": {
"babel-traverse": "6.22.1",
"babel-types": "6.22.0",
"babylon": "6.15.0",
"lazy": "1.0.11",
"nativescript-dev-android-snapshot": "^0.*.*",
"nativescript-dev-typescript": "^0.3.2",
"typescript": "~2.0.10",
"zone.js": "~0.7.2"
}
}

When we run the project it works perfectly in android, however on IOS the search bar continues to show between the test and test1 components. 

Could you suggest a solution for getting the project working in IOS on NS2.5.

Regards

Anurag

[Nick Iliev]

Hi Soumen,

Based on the last application archive send from my colleague Nikolay Tsconev and modified with the `package.json` with 2.5.x versioning I was able to run and fully reproduce the issue. However there is an easy fix for this issue - we will need to explicitly set the SearchBar as ActionItem.
e.g. (based on test1-component.html file)

<ActionBar android:title="Title">
    <ActionItem>
        <GridLayout>
            <SearchBar></SearchBar>
        </GridLayout>
    </ActionItem>
</ActionBar>

Now that the SearchBar is explicitly set as part of ActionItem it will be cleared on navigation and won't stay visible on the next page visited.

Migrating to NativeScript 3.x.x should be possible as both reasons are resolved as explained in the lines below:

- regarding the first issue - it is already fixed and the fix will be included in our next release (3.1) - however, you can already test the fix by installing tns-core-modules with next version
e.g.

tns plugin remove tns-core-modules
tns plugin add tns-core-modules@next

- regarding the second issue about using keyframes - all keyframe animations should work as expected.
In the specific case shown here, the problem comes from wrong syntax when using the scale method. You would need only to pass two arguments (scaleX and scaleY) and the issue is resolved. Demonstration project showing the usage of scale animation (with the exact pulse example) can be found here.


Regards,
Nikolay Iliev
Progress Telerik