CODEWITHSUNDEEP
javascripthtmlcssangularjs
user3819295
user3819295

Reputation: 861

AngularJS tabs notifications

I'm looking for a way to implement "tab notification" in AngularJS, to indicate that there are alerts that need to be taken care of. Something like :

      (1)           (3)
TAB_ONE      TAB_TWO      TAB_THREE

Do you have any suggestions on how this can be done?

Upvotes: 0

Views: 209

Answers (1)

XaviGuardia
XaviGuardia

Reputation: 186

I will use a UI framework, like Bootstrap. Then I will have a controller that holds the counters for the badges.

(function() {
  var app = angular.module("tabbadges",[]);
  app.controller("badgesController", badgesController);
  function badgesController($scope) {
    $scope.badges = {
      tab1: 4,
      tab2: 6,
      tab3: 2
    };
  }
})();

I will then create the html for the view

<ul class="nav nav-tabs">
    <li class="nav-item">
       <a class="nav-link active" href="#">Tab one
      <span class="badge badge-pill badge-primary">{{badges.tab1}}</span>
</a>
  <li class="nav-item">
      <a class="nav-link" href="#">Tab two
          <span class="badge badge-light badge-primary">{{badges.tab2}}</span></a>

    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Tab three  <span class="badge badge-light badge-primary">{{badges.tab3}}</span></a>
    </li>
</ul>

[Codepen] (https://codepen.io/xaviguardia/pen/LYEybvZ)

Upvotes: 1

Related Questions