Html element binding (non input)

Ionic Framework ionic-v3
1

i currently have

<ion-header>
  <ion-navbar>
      <ion-title>{{place?.Name}}</ion-title>
   </ion-navbar>
</ion-header>

which works great but i want to dynamically change the underlying object that feeds to this and need to “bind” but doesnt work using

<ion-header>
  <ion-navbar>
   <ion-title><span ng-bind="place.Name"></span></ion-title>
  </ion-navbar>
</ion-header>

I just need to be able to find a way to bind to non-input html elements like i can with {{}}

2

I don’t really understand your goal, but have you looked at innerHTML?

3

I need to be able to <ion-title>{{place?.Name}}</ion-title> make it so that if the underline object’s value for Name is updated then the page that has this will be reflected.

i have a .html page that is called details.html that is used in 2 different tabs and right now I want to bind the underline object in a service and once this item in the service is updated, both of the tabs that showing details will be updated with the latest value in the object without me having to “refresh” anything

4

What do you mean by “used”? You have two separate @Component classes that share the same templateUrl? That seems very strange.

5

I guess in short, if i have a object in a service and all my pages bind to this object and if this object changes i want all my pages that use it to reflect the new values of the object, see below for more details.

my setup

tabs
[Home] [Places] [Events] [Settings]
Home tab can either be set to PlaceDetailsPage template or to HomePage template, see below

export class TabsPage {


// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
tab2Root: any = PlacesPage;
tab3Root: any = EventsPage;
tab4Root: any = SettingsPage;
tabIndex: number;

 constructor(params: NavParams, public testService: TestService) {   
 let hasHomePlace = this.testService.data.HomePlace != null;
this.tabIndex = hasHomePlace ? 0 : 1;
if(hasHomePlace)
  {   
    this.tab1Root = PlaceDetailsPage;
  }

}

As you can see its defualted to homepage unless the user has as HomePlace in the main object

Once things change in the [Settings] tab, i want everything in the Places tab and Events tab to reflect the new values in testService.data.Places and testService.data.Events and if they are bound it should work automatically without me having to do anything since if the underline object changes the display should reflect it.

I am already doing this for the tab badges and it works as seen

<ion-tab [root]="tab3Root" tabTitle="Events" [tabBadge]=testService.eventCount tabBadgeStyle="danger" tabIcon="calendar"></ion-tab>

service
testService.data(data for all tabs)
testServices.data.Places (shown in the [Places] tab as a list
testService.data.Events list of events for events tab
testService.data.HomePlace (if set will contain an object that is has the same structure as an object in testService.data.Places and will be shown on the [Home] tab, if this object is null then i show a different page HomePage
testService.data.CurrentViewingPlace will be when the user clicks on a place from [Places] tab to show the details, i use this.navCtrl.push(PlaceDetailsPage, { placeId: place.PlaceID }) and this is exactly the same object structure, same template as homePlace or what will be displayed on the PlaceDetailsPage set to the first tab if homePlace is null.

6

That generally just happens, but I don’t see how you’re binding to the same object when in one case you are passing (and presumably using) NavParams and in another you aren’t (when showing the home place).

If you do something like defining activePlace in your service and assigning to it (either home or some other place), things should work as you expect, but in that case you can’t be showing both home and some other place at the same time. That would be a logical impossibility, it seems to me, to ask two instances of a component to bind to the both the same and to different properties at the same time.