Unable to bind the title of the BottomNavigationTab component in Angular

[aaitken80]

trafficstars

Make sure to check the demo app(s) for sample usage

Done

Make sure to check the existing issues in this repository

Done

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital letter.

Which platform(s) does your issue occur on?

• iOS/Android/Both
• iOS/Android versions
• emulator or device. What type of device?

Android 10.0 Emulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 6.4.0

• Cross-platform modules: (check the 'version' attribute in the node_modules/@nativescript/core/package.json file in your project)

• Runtime(s): Android 6.5.3 iOS 6.5.2

• Plugin(s):

  "dependencies": { "@angular/animations": "~8.2.0", "@angular/common": "~8.2.0", "@angular/compiler": "~8.2.0", "@angular/core": "~8.2.0", "@angular/forms": "~8.2.0", "@angular/platform-browser": "~8.2.0", "@angular/platform-browser-dynamic": "~8.2.0", "@angular/router": "~8.2.0", "@nativescript/theme": "^2.3.2", "@nstudio/nativescript-cardview": "^1.0.0", "@nstudio/nativescript-checkbox": "^1.0.0", "@nstudio/nativescript-snackbar": "^1.1.2", "@types/node": "^13.7.4", "nativescript-angular": "^8.21.0", "nativescript-camera": "^4.5.0", "nativescript-carousel": "^6.1.1", "nativescript-drop-down": "^5.0.4", "nativescript-fingerprint-auth": "^7.0.2", "nativescript-gradient": "^2.0.1", "nativescript-imagepicker": "^7.1.0", "nativescript-inappbrowser": "^2.2.0", "nativescript-iqkeyboardmanager": "^1.5.1", "nativescript-material-bottomnavigationbar": "^3.3.1", "nativescript-material-ripple": "^3.1.11", "nativescript-plugin-filepicker": "^1.0.0", "nativescript-secure-storage": "^2.6.0", "nativescript-ui-listview": "^8.0.1", "nativescript-ui-sidedrawer": "^8.0.0", "nativescript-windowed-modal": "^6.2.1", "ngx-take-until-destroy": "^5.4.0", "npm-force-resolutions": "0.0.3", "reflect-metadata": "~0.1.12", "rxjs": "^6.4.0", "serialize-javascript": "^4.0.0", "tns-core-modules": "^6.5.20", "zone.js": "^0.9.1" }, "devDependencies": { "@angular/cli": "^8.3.24", "@angular/compiler-cli": "~8.2.0", "@nativescript/schematics": "^1.0.0", "@ngtools/webpack": "^9.0.3", "@types/jasmine": "^3.5.5", "@typescript-eslint/eslint-plugin": "^2.20.0", "@typescript-eslint/parser": "^2.20.0", "codelyzer": "~4.5.0", "compodoc": "0.0.41", "eslint": "^6.8.0", "jasmine": "~3.3.1", "jasmine-core": "~3.3.0", "jasmine-spec-reporter": "~4.2.1", "java-properties": "^1.0.2", "karma": "4.4.1", "karma-jasmine": "^3.1.1", "karma-nativescript-launcher": "0.4.0", "karma-webpack": "3.0.5", "nativescript-dev-appium": "^6.1.3", "nativescript-dev-webpack": "^1.5.1", "nativescript-fonticon": "^2.0.0", "nativescript-unit-test-runner": "^0.7.0", "nlf": "^2.1.1", "node-sass": "^4.13.1", "plist": "^3.0.1", "sonarqube-scanner": "^2.6.0", "tns-platform-declarations": "^6.4.1", "typescript": "~3.5.3", "xmlbuilder2": "^2.1.7" }

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

I want to translate the titles on the Navigation buttons on the bottom, I have a translate pipe that I use for this

So I have a BottomNavigationTab like this

<BottomNavigationTab title="'Some Title'" icon="res://icon"></BottomNavigationTab>

Normally to add a translated title I would simply do

<BottomNavigationTab title="'{{'foo.bar' | translate}}'" icon="res://icon"></BottomNavigationTab>

or Asynchronously do it like

<BottomNavigationTab title="'{{'foo.bar' | translate | asynch }}'" icon="res://icon"></BottomNavigationTab>

But these do not work with this component, only setting the title value directly works. Same goes if I do it programmatically in OnInit, they do not get set correctly and just show blank.

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

[farfromrefug]

@aaitken80 this is getting out of my league. I dont know nothing about angular :s Does it work with my other material components?

[aaitken80]

I have to say I've not tried your other components, I was just trying the bottom navigation just now.

[boris01]

@aaitken80 look how I did it. Hope it will help you. import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from "@angular/core"; import { ActionBarService } from "../helpers/action-bar.service"; import { ActivatedRoute } from "@angular/router"; import { CommonService } from "../shared/common/common.service"; import { BiometricService } from "../shared/auth/services/biometric.service"; import { RoutingService } from "../helpers/routing.service"; import { Subscription } from "rxjs/internal/Subscription"; import { BottomNavigationBar, TabPressedEventData, TabReselectedEventData, TabSelectedEventData, TitleVisibility, BottomNavigationTab } from "@nativescript-community/ui-material-bottomnavigationbar" import { TranslateService } from '@ngx-translate/core'; import { Visibility } from '@nativescript/core/ui/enums'; import { ImageSource, Color, Font } from '@nativescript/core'; import { FontStyle, FontWeight } from '@nativescript/core/ui/styling/font';

@Component({ selector: "app-main", templateUrl: "./main.component.html", styleUrls: ["./main.component.scss"] }) export class MainComponent implements OnInit, OnDestroy { subscritions: Subscription = new Subscription(); homeTitle: string; modulesTitle: string; notificationsTitle: string; myProfileTitle: string; tabs: BottomNavigationTab[] = []; homeTab: BottomNavigationTab = new BottomNavigationTab(); modulesTab: BottomNavigationTab = new BottomNavigationTab(); notificationTab: BottomNavigationTab = new BottomNavigationTab(); profileTab: BottomNavigationTab = new BottomNavigationTab();

@ViewChild('bottomNavigationBar', { read: ElementRef, static: false }) private _bottomNavigationBar: ElementRef<BottomNavigationBar>; constructor( private actionBarService: ActionBarService , private commonService: CommonService , private routingService: RoutingService , private activeRoute: ActivatedRoute , public biometricService: BiometricService , public translateService: TranslateService ) { }

ngOnInit() { this.homeTitle = this.translateService.instant('app.pages.home.title'); this.modulesTitle = this.translateService.instant('app.pages.modules.title'); this.notificationsTitle = this.translateService.instant('app.pages.notifications.title'); this.myProfileTitle = this.translateService.instant('app.pages.myprofile.title'); this.homeTab.icon = ImageSource.fromFontIconCodeSync("\uf015", new Font("Font-Awesome", 48, FontStyle.NORMAL, FontWeight.NORMAL), new Color("white")); this.homeTab.title = this.homeTitle;

this.modulesTab.icon = ImageSource.fromFontIconCodeSync("\uf0c9", new Font("Font-Awesome", 48, FontStyle.NORMAL, FontWeight.NORMAL), new Color("white"));
this.modulesTab.title = this.modulesTitle;

this.notificationTab.icon = ImageSource.fromFontIconCodeSync("\uf0f3", new Font("Font-Awesome", 48, FontStyle.NORMAL, FontWeight.NORMAL), new Color("white"));
this.notificationTab.title = this.notificationsTitle;

this.profileTab.icon = ImageSource.fromFontIconCodeSync("\uf007", new Font("Font-Awesome", 48, FontStyle.NORMAL, FontWeight.NORMAL), new Color("white"));
this.profileTab.title = this.myProfileTitle;

this.tabs.push(
  this.homeTab,
  this.modulesTab,
  this.notificationTab,
  this.profileTab
);
this.routingService.navigateToDashboard(this.activeRoute);

}

onbottomNavigationBarLoaded(): void { if (this._bottomNavigationBar) { const bottomNavigationBar = this._bottomNavigationBar.nativeElement; bottomNavigationBar.titleVisibility = 1; } }

onBottomNavigationTabPressed(args: TabPressedEventData): void { console.log(pressed tab index: ${args.index}); }

onBottomNavigationTabSelected(args: TabSelectedEventData): void { console.log(old tab index: ${args.oldIndex}); console.log(selected tab index: ${args.newIndex}); }

onBottomNavigationTabReselected(args: TabReselectedEventData): void { console.log(reselected tab index: ${args.index}); }

ngOnDestroy(): void { if (!this.subscritions) { this.subscritions.unsubscribe(); } }

}

[cityinspain]

@aaitken80 I wasn't able to reproduce the error. Do you think you could provide an example?