Is it possible to use badge in an ion-view title?

I have the following code for a title:

<ion-view view-title="{{(projects.length == 0) ? 'Loading projects' : 'Projects (' + projects.length + ')'}}">

It is possible to get a badge in there? I tried like this:

<ion-view view-title="Projects" badge="6" badge-style="badge-assertive">

But that doesn’t show anything.

Thanks in advance!

If you are using ion-nav-view you can use the ion-nav-title directive (using Ionic version 1.0.0-beta.14) to place html in the title. Here is an example, it would need some more styling:

<ion-view>
    <ion-nav-title>
        <div class="item" style="padding: 0; background: transparent;">
            <span>Projects</span>
            <span class="badge badge-assertive">6</span>
        </div>
    </ion-nav-title>
    <ion-content>
        <!-- content for your view -->
    </ion-content>
</ion-view>

Thanks! This works fine indeed.

1 Like

Hi Brandy

Thank you so much for the great example. I tried enhancing it by adding <i class="button button-icon icon ion-android-sync"></i> instead of the number 6. However I cannot get it to show. Any help will be appreciated.

Irena

Hi! Are you using beta 14?

If you check out this codepen you will see the icon: http://codepen.io/anon/pen/XJRRjE

However, if you change lines 8 & 9 to this:

<link href="//code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>

You will no longer be able to see the icon. Beta 14 is still using version 1.5.2 and that icon isn’t apart of it, so this could be causing your problem. If this isn’t the reason please modify the codepen so I can see the problem. :smile:

1 Like

Thank you - this is exactly the issue. I am using beta.14. Self inflicted.

No worries. The main page of ionicons shows the 2.0 icons so it can be a little confusing. Glad to help!