ngx-admin/src/app/theme/msgCenter/msgCenter.html

<ul class="al-msg-center clearfix">
  <li class="dropdown">
    <a href class="dropdown-toggle" id="msg-dd1" data-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-bell-o"></i><span>5</span>

      <div class="notification-ring"></div>
    </a>

    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd1">
      <i class="dropdown-arr"></i>

      <div class="header clearfix">
        <strong>Notifications</strong>
        <a href>Mark All as Read</a>
        <a href>Settings</a>
      </div>
      <div class="msg-list">
        <a *ngFor="#msg of notifications" href class="clearfix">
          <div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
                                     src="{{ ( msg.image ||  (msg.name | profilePicture)) }}"></div>
          <div class="msg-area">
            <div>{{ msg.text }}</div>
            <span>{{ msg.time }}</span>
          </div>
        </a>
      </div>
      <a href>See all notifications</a>
    </div>
  </li>
  <li class="dropdown">
    <a href class="msg dropdown-toggle" id="msg-dd2" data-toggle="dropdown" aria-expanded="false">
      <i class="fa fa-envelope-o"></i><span>5</span>
      <div class="notification-ring"></div>
    </a>
    <div class="top-dropdown-menu dropdown-menu" aria-labelledby="msg-dd2">
      <i class="dropdown-arr"></i>
      <div class="header clearfix">
        <strong>Messages</strong>
        <a href>Mark All as Read</a>
        <a href>Settings</a>
      </div>
      <div class="msg-list">
        <a *ngFor="#msg of messages" href class="clearfix">
          <div class="img-area"><img [ngClass]="{'photo-msg-item': !msg.image}"
                                     src="{{ ( msg.image ||  (msg.name | profilePicture)) }}"></div>
          <div class="msg-area">
            <div>{{ msg.text }}</div>
            <span>{{ msg.time }}</span>
          </div>
        </a>
      </div>
      <a href>See all messages</a>
    </div>
  </li>
</ul>