search

nativescript-community / ui-material-components

Monorepo that contains all of the NativeScript Material Design plugins.
https://nativescript-community.github.io/ui-material-components/
Apache License 2.0
218 stars 80 forks source link

Unable to bind the title of the BottomNavigationTab component in Angular #195

Open aaitken80 opened 4 years ago

aaitken80 commented 4 years ago

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?

Android 10.0 Emulator

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

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?

farfromrefug commented 4 years ago

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

aaitken80 commented 4 years ago

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

boris01 commented 4 years ago

@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; 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 commented 4 years ago

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