The methods ('selectTab'/'showBadge") not working

[ghost]

The code of the demo on GitHub not working.

@ViewChild('bottomNavigationBar', { read: ElementRef, static: false }) private _bottomNavigationBar: ElementRef;

onBottomNavigationBarLoaded(): void { const bottomNavigationBar = this._bottomNavigationBar.nativeElement; bottomNavigationBar.selectTab(this.tabSelectedIndex); // bottomNavigationBar.showBadge(2, 4); }

return 'ERROR TypeError: Cannot read property 'nativeElement' of undefined'

Can I solve this? Thanks

[henrychavez]

When you use view child you should use ngafteeviewinit life cycle method, if you use the bottomNavigationBarLoaded method this method gets an argument with an object that in this will be your native element

[henrychavez]

In the xml Put the $event arg like this (loaded)="onbottomNavigationBarLoaded($event)"

Then you need to change your function in the ts file like this onbottomNavigationBarLoaded(args: EventData) { const bar = args.object; bar.showBadge(2,4); }

[ghost]

Thanks. I try your solution but the following error is returned: "Property 'showBadge' does not exist on type 'Observable'."

How can i fix it? Thanks

[henrychavez]

yeah, I forgot to mention, the EventData has an object that is type Observable, in this case, you need to cast it as a BottomNavigationBar class like this

onbottomNavigationBarLoaded(args: EventData) {
  const bar = args.object as BottomNavigationBar;
  bar.showBadge(2,4);
}

[ghost]

Now there's no error, but when I use 'bar.showBadge(2,4);' no badge is shown.

Thanks

[henrychavez]

can you show me the code you are working on? is the same as the demo? or did you made some changes? because I just run it and everything is ok

[ghost]

yes, below the code:

• in .html:

<BottomNavigationBar
        activeColor="#00B8A9"
        inactiveColor="#BCBCBC"
        backgroundColor="#FDFFFC"
        (tabSelected)="onBottomNavigationTabSelected($event)"
        (loaded)="onBottomNavigationBarLoaded($event)"
>
    <BottomNavigationTab title="Home" icon="res://ic_home"></BottomNavigationTab>
    <BottomNavigationTab title="Amici" icon="res://ic_friends"></BottomNavigationTab>
    <BottomNavigationTab title="Notifiche" icon="res://ic_notification"></BottomNavigationTab>
    <BottomNavigationTab title="Profilo" icon="res://ic_profile"></BottomNavigationTab>
</BottomNavigationBar>

• in .ts:

import { TabPressedEventData, TabSelectedEventData, BottomNavigationBar } from "nativescript-bottom-navigation";

onBottomNavigationBarLoaded(args: EventData): void {
        const bar = args.object as BottomNavigationBar;
        bar.showBadge(1,1);
        // bar.selectTab(2);
    }

[ghost]

UPDATE:

The "selectTab" works, but no "showBadge".