When using in app.component.ts and using router module its hide the bottombar

[aloketewary]

I am using angular with nativescript 3 now when I added its to root and change routing through api call

tabSelected(args: SelectedIndexChangedEventData) {
        // only triggered when a different tab is tapped
        if (args.newIndex === 1) {
            this.router.navigate(['items']);
        }
        console.log(args.newIndex);
    }

After changing the route its hide the bottombar.

[rhanb]

Hi @aloketewary ,

Could you provide more code? The htmlpart of your component, and the tsand html code of your component you navigate to the Route"items".

Thanks

[aloketewary]

Hi @rhanb, Thanks for quick reply. Here is my code.

App.Component.html

<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:x="nativescript-statusbar" loaded="loaded" xmlns:x="nativescript-statusbar"
    backgroundSpanUnderStatusBar="true">
    <x:StatusBar ios:barStyle="dark" android:barStyle="#E34900" />
    <Page.actionBar>
        <ActionBar title="{{ 'app.name' | L }}" class="action-bar"></ActionBar>
    </Page.actionBar>
    <GridLayout rows="*, auto">
        <page-router-outlet></page-router-outlet>

    </GridLayout>
    <BottomBar row="1" [items]="tabItems" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
        [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
</Page>

App.component.ts

import { Router } from '@angular/router';
import { Component } from "@angular/core";
import { registerElement } from 'nativescript-angular';
import { BottomBar, BottomBarItem, TITLE_STATE, SelectedIndexChangedEventData, Notification } from 'nativescript-bottombar';

registerElement('BottomBar', () => BottomBar);

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent {
    public hidden: boolean;
    public titleState: TITLE_STATE;
    public _bar: BottomBar;
    public inactiveColor: string;
    public accentColor: string;

    constructor(private router: Router) { }

    public tabItems: Array<BottomBarItem> = [
        new BottomBarItem(0, "Home", "ic_home_black_24dp", "#F44336"),
        new BottomBarItem(1, "Calendar", "ic_calendar", "#F44336"),
        new BottomBarItem(2, "Profile", "ic_collaborator", "#F44336"), //, new Notification("pink", "yellow", "1")
        new BottomBarItem(3, "Message", "ic_paperplane", "#F44336")
    ];

    tabLoaded(event) {
        this._bar = <BottomBar>event.object;
        this.hidden = false;
        this.titleState = TITLE_STATE.SHOW_WHEN_ACTIVE;
        this.inactiveColor = "white";
        this.accentColor = "black";
    }

    tabSelected(args: SelectedIndexChangedEventData) {
        // only triggered when a different tab is tapped
        if (args.newIndex === 1) {
            this.router.navigate(['items']);
        }
        console.log(args.newIndex);
    }
} 

Item.component.html

<StackLayout class="page">
    <ListView [items]="items" class="list-group">
        <ng-template let-item="item">
            <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
        </ng-template>
    </ListView>
</StackLayout>

Item.component.ts

import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";
import { localize } from "nativescript-localize";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items: Item[];

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }
}

Item.service.ts

import { Injectable } from "@angular/core";

import { Item } from "./item";

@Injectable()
export class ItemService {
    private items = new Array<Item>(
        { id: 1, name: "Ter Stegen", role: "Goalkeeper" },
        { id: 3, name: "Piqué", role: "Defender" },
        { id: 4, name: "I. Rakitic", role: "Midfielder" },
        { id: 5, name: "Sergio", role: "Midfielder" },
        { id: 6, name: "Denis Suárez", role: "Midfielder" },
        { id: 7, name: "Arda", role: "Midfielder" },
        { id: 8, name: "A. Iniesta", role: "Midfielder" },
        { id: 9, name: "Suárez", role: "Forward" },
        { id: 10, name: "Messi", role: "Forward" },
        { id: 11, name: "Neymar", role: "Forward" },
        { id: 12, name: "Rafinha", role: "Midfielder" },
        { id: 13, name: "Cillessen", role: "Goalkeeper" },
        { id: 14, name: "Mascherano", role: "Defender" },
        { id: 17, name: "Paco Alcácer", role: "Forward" },
        { id: 18, name: "Jordi Alba", role: "Defender" },
        { id: 19, name: "Digne", role: "Defender" },
        { id: 20, name: "Sergi Roberto", role: "Midfielder" },
        { id: 21, name: "André Gomes", role: "Midfielder" },
        { id: 22, name: "Aleix Vidal", role: "Midfielder" },
        { id: 23, name: "Umtiti", role: "Defender" },
        { id: 24, name: "Mathieu", role: "Defender" },
        { id: 25, name: "Masip", role: "Goalkeeper" },
    );

    getItems(): Item[] {
        return this.items;
    }

    getItem(id: number): Item {
        return this.items.filter(item => item.id === id)[0];
    }
}

[rhanb]

@aloketewary could you also share your Routing config?

[aloketewary]

This is my app.routing.ts

import { ShowAllContactsComponent } from './show-all-contacts/show-all-contacts.component';
import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { Routes } from "@angular/router";

import { ItemsComponent } from "./item/items.component";
import { ItemDetailComponent } from "./item/item-detail.component";

const routes: Routes = [
    { path: "", redirectTo: "/home", pathMatch: "full" },
    { path: "items", component: ItemsComponent },
    { path: "item/:id", component: ItemDetailComponent },
    { path: "home", component: ShowAllContactsComponent },
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes)],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

[rhanb]

@aloketewary , please provide a github repo to reproduce the issue. Thanks 👍

[aloketewary]

Sorry for late reply... it takes some time, when I have done with it I will provide the GitHub repo.