Update navigation-button icon dynamically



I’m trying to change the icon used as the back button in my application based on a boolean value. The current way I’m attempting this does not seem to be working. Here’s an example:

    <action-bar title="Some Title">
      <navigation-button icon="{{isRtl ? 'res://back_rtl' : 'res://back'}}" tap="goBack" text=" "/>

Instead of this I figure I could programmatically change it from the code behind file, but that doesn’t seem to be working either.

// some other imports above

export function onLoaded(args: EventData) {
  const page = <Page>args.object;  
  page.bindingContext = someViewModel;

  if (isRTL){
    page.actionBar.navigationButton.icon = "res://back_rtl"
  } else {
    page.actionBar.navigationButton.icon = "res://back"

 page.bindingContext = someViewModel;

Is there something that I’m not doing correctly in order to change the icon when the page loads? I’m not against doing it on the navigatingTo event either. I just figure the ActionBar wouldn’t be initialized yet if I did that. Thanks for any help!


Try loaded event of ActionBar.