# Side-menu badges (conference app reference)

**URL:** <https://forum.ionicframework.com/t/side-menu-badges-conference-app-reference/91927>\
**Category:** ionic-v3\
**Created:** [May 26, 2017, 9:18pm UTC](https://forum.ionicframework.com/t/side-menu-badges-conference-app-reference/91927 "2017-05-26T21:18:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![brassier](https://avatars.discourse-cdn.com/v4/letter/b/5daacb/32.png) [@brassier](https://forum.ionicframework.com/u/brassier)\
**Post date:** [May 26, 2017, 9:18pm UTC](https://forum.ionicframework.com/t/side-menu-badges-conference-app-reference/91927/1 "2017-05-26T21:18:32Z")

</div>

I’m using the [Ionic 2 conference app](https://github.com/driftyco/ionic-conference-app) as a template for displaying menu items. I’d like to show a badge item on menu items, based on values in a service.

I can certainly extend the `PageInterface` to include a static badgeCount, and adjust the markup to match. But how can I get that to bind to a property so it updates when the service value updates? For example, below, where I have badgeCount set to 3, can I bind that to a service property somehow?

Menu:

```
  <ion-list>
    <ion-list-header>
      Features
    </ion-list-header>
    <button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)" name="{{p.buttonName}}">
      <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
      {{p.title}} <ion-badge *ngIf="p?.badgeCount > 0">{{p.badgeCount}}</ion-badge>
    </button>
  </ion-list>

```

New Page Definition:

```
{ title: 'Notifications' , component: NotificationsPage, icon: 'alarm', buttonName: 'btnNotifications', badgeCount: 3 }
```

---

<div class="post-metadata">

**Author:** ![FrancoisIonic](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/francoisionic/32/106767_2.png) [@FrancoisIonic](https://forum.ionicframework.com/u/FrancoisIonic)\
**Post date:** [May 26, 2017, 11:20pm UTC](https://forum.ionicframework.com/t/side-menu-badges-conference-app-reference/91927/2 "2017-05-26T23:20:20Z")

</div>

If you need two-way data binding (so that your template view can update your controller or provider data, and both ways), you should use [(ngModel)]. I refer you to the Angular docs:

[https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html](https://angular.io/docs/ts/latest/api/forms/index/NgModel-directive.html)

---

<div class="post-metadata">

**Author:** ![brassier](https://avatars.discourse-cdn.com/v4/letter/b/5daacb/32.png) [@brassier](https://forum.ionicframework.com/u/brassier)\
**Post date:** [May 30, 2017, 1:37pm UTC](https://forum.ionicframework.com/t/side-menu-badges-conference-app-reference/91927/3 "2017-05-30T13:37:13Z")

</div>

Hi @FrancoisIonic - I’m aware of standard 2-way binding using ngModel. This is a bit different, in that there is a simple page object that has the contents of the menu. I’d like that simple object to somehow have a dynamic property to use for binding.

I did get one thing to work - in place of binding it to an object directly I used a method, which can evaluate the page and get notification info. Not completely what I was looking for, but it seems to work.

HTML:

```
    <button ion-item menuClose *ngFor="let p of appPages" (click)="openPage(p)" name="{{p.buttonName}}">
      <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
      {{p.title}} <ion-badge *ngIf="notificationCount(p) > 0">{{notificationCount(p)}}</ion-badge>
    </button>

```

TS:

```
notificationCount(page: PageInterface) {
    switch (page.title) {
        case 'Notifications': return this.notificationsService.driverNotificationCount; 
    }
}
```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [May 30, 2017, 10:21pm UTC](https://forum.ionicframework.com/t/side-menu-badges-conference-app-reference/91927/4 "2017-05-30T22:21:20Z")

</div>

Observables would be how I would go at this. I would put a `BehaviorSubject<number>` `badgeCount` property in each page, and use the `AsyncPipe` to unwrap it like so: `{{p.badgeCount | async}}`.

Then you just call `page.badgeCount.next()` with new values and let Angular’s change detection handle the rest.