How keep entered all fields form data while navigation between multiple fragments in Nativescript-bottombar?

nativescriptrocks
plugins

#1

Hi,

I have tried the Nativescript-bottombar plugin with my app.
But while navigating between all the fragments using bottom-bar menus, All the entered data lost. Is there is any way to keep entered data on that particular fragment screen even multiple fragment navigation will happen.

In my case, I want save the all entered data from multiple fragments on the end of bottombar menu or next page.

Here is my code,

app.component.html

<page-router-outlet></page-router-outlet>
<ActionBar title="nativescript-bottombar" class="action-bar">
</ActionBar>
<GridLayout rows="*, auto">
    <StackLayout orientation="vertical">
        <Button class="btn btn-primary"  #CB1 text="Hide" (tap)="toggleHide()"></Button>
        <Button class="btn btn-primary"  #CB2 text="Colored" (tap)="toggleColored()"></Button>
    </StackLayout>
  <GridLayout *ngIf="condition" backgroundColor="green">

<GridLayout class="gridtest" columns="*,*" rows="*" sdkExampleTitle sdkToggleNavButton>
<Label col="0" row="0" class="m-15 h2 text-left" color="DarkSlateBlue" text="V Name" textWrap="true"></Label>
<TextField col="1" row="0" class="input input-border" [(ngModel)]="vnameng" ></TextField>
</GridLayout>


    </GridLayout>
<GridLayout [ngSwitch]="tabname" class="p-15 m-t-15" height="280" borderRadius="2">
 
    <GridLayout *ngSwitchCase="'calender'" backgroundColor="#8C489F">

<GridLayout class="gridtest" columns="*,*" rows="*" sdkExampleTitle sdkToggleNavButton>
<Label col="0" row="0" class="m-15 h2 text-left" color="DarkSlateBlue" text="Official Number" textWrap="true" ></Label>
<TextField col="1" row="0" class="input input-border" [(ngModel)]="officialnumng" keyboardType="number"></TextField>     
</GridLayout> 

    </GridLayout>
    <GridLayout *ngSwitchCase="'profile'" backgroundColor="#0077AF">
<GridLayout class="gridtest" columns="*,*" rows="*" sdkExampleTitle sdkToggleNavButton>
<Label col="0" row="0" class="m-15 h2 text-left" color="DarkSlateBlue" text="GRT" textWrap="true" ></Label>
<TextField col="1" row="0" class="input input-border" [(ngModel)]="grtng" ></TextField>     
</GridLayout>
    </GridLayout>
    <GridLayout *ngSwitchCase="'message'" backgroundColor="#FFFF66">
        <GridLayout class="gridtest" columns="*,*" rows="*" sdkExampleTitle sdkToggleNavButton>
<Label col="0" row="0" class="m-15 h2 text-left" color="DarkSlateBlue" text="V Type" textWrap="true"></Label>
<TextField col="1" row="0" class="input input-border" [(ngModel)]="vtypeng" id="locationTFId" ></TextField>
</GridLayout>
    </GridLayout>

</GridLayout>

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

app.component.ts

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

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

export class AppComponent {
    public hidden: boolean;
    public colored: boolean;
    public titleState: TITLE_STATE;
    public _bar: BottomBar;
    public inactiveColor: string;
    public accentColor: string;
public tabname: string;
public condition: boolean;
    public items: Array<BottomBarItem> = [
        new BottomBarItem(0, "Home", "ic_home_black_24dp", "black", new Notification("blue", "white", "1")),
        new BottomBarItem(1, "Calendar", "ic_calendar", "#1083BF", new Notification("green", "blue", "1")),
        new BottomBarItem(2, "Profile", "ic_collaborator", "pink", new Notification("pink", "yellow", "1")),
        new BottomBarItem(3, "Message", "ic_paperplane", "green", new Notification("green", "red", "1"))
    ];
public constructor(private router: Router){
        this.hidden = false;
        this.colored = true;
        this.titleState = TITLE_STATE.SHOW_WHEN_ACTIVE;
        this.inactiveColor = "white";
        this.accentColor = "blue";
this.condition = true;
        

}
    tabSelected(args: SelectedIndexChangedEventData) {
        console.log(args.newIndex);

        if (args.newIndex !== args.oldIndex) {
            this._bar.setNotification("", args.newIndex);
        }
if(args.newIndex == 0){
this.condition = true;
this.tabname = "";
        }
        if(args.newIndex == 1){
this.condition = false;
this.tabname = "calender";

        }
         if(args.newIndex == 2){
 this.tabname = "profile";
        }
         if(args.newIndex == 3){
 this.tabname = "message";
        }
    }

    tabLoaded(event) {
        this._bar = <BottomBar>event.object;
       
        console.log('tabLoaded');
    }
    selectItem() {
        this._bar.selectItem(0);
    }

    getCurrentIndex() {
        console.log(this._bar.selectedIndex);
    }

    toggleHide() {
        this.hidden = !this.hidden;
    }

    toggleColored() {
        this.colored = !this.colored;
    }
}

Thanks in advance.