Search code examples
angulartypescriptandroid-actionbarnativescript

Nativescript Angular 6 - Adding Icon with String into Actionbar title


Using Angular 6 with Nativescript. For one of my pages, I want the Actionbar title to be a dropdown - so I want to show text with a down-icon. enter image description here

This is currently what I have, but I cannot seem to figure out how to add anything but the text to the actionbar title: ```

<ActionBar [title]="user.userName" class="profile-head">
  <ActionItem
    ios.position="left"
    android.position="left">
        <Label
            class="fal"
            text="&#xf234;"></Label>
    </ActionItem>
  <ActionItem
    ios.position="right"
    android.position="right">
        <Label
            class="fas"
            text="&#xf013;">
        </Label>
    </ActionItem>
</ActionBar>

```


Solution

  • Use a Custom TitleView.

    Example

    <ActionBar title="test">
      <StackLayout orientation="horizontal"
        ios:horizontalAlignment="center"
        android:horizontalAlignment="left">
        <Label text="YourTest"  class="action-label"></Label>
        <Image src="res://Your_Image" class="action-image"></Image>
      </StackLayout>
    </ActionBar>