<button md-icon-button [mdMenuTriggerFor]="appMenu2" (click)="checker()" style="float:right;outline:none;padding-top:8px"> 
  <span class="num" *ngIf="countfun()">{{final_counter}}</span>
  <md-icon md-tooltip="Notification" [style.color] = "final_counter > 0 ? '#e91313' : '#ffffff'" style="float: right;padding-top:3%; color:white">notifications</md-icon>
              
                               </button>                                 
                               <md-menu #appMenu2="mdMenu" id="mdMenu"  class="myStyle"  [overlapTrigger]="false">
                                <div style="width:260px !important;height: 100vh;">
                                  <div class="row" style="margin: 0%;text-align: center;font-weight: 600;background: #435e88;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);">
                                    <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
                                      <label for="notif" style="margin: 0;padding: 3px;color: white;">Notifications</label>    
                                    </div>
                                   </div>
                                   <div class="row" style="font-size: 12px;margin: 0%;">
                                     <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
                                      <div class="row" style="margin-top: 5px;margin: 0%;background: white;margin: 3px;box-shadow:3px 1px 5px 0px rgb(178, 176, 174);"  *ngFor="let device of final_data;let i = index;">
                                        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;">
                                           <div class="row" (click)="calldevice(device.did)" style="margin: 0%;margin-bottom: 5px;margin-top: 5px;">
                                             <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0%;padding-left: 3px;">
                                             <p style="margin: 0%;font-weight: 700;color: #4897d8;">{{ device.data }} {{ device.address }}</p>
                                            </div>
                                             <!-- <div class="col-sm-12 col-md-6 col-lg-6" style="padding: 0%;padding-left: 3px;">
                                              <p style="margin: 0%;">{{ device.date }} {{ device.time }}</p>
                                             </div> -->
                                          </div>
                                          <div class="row" style="margin: 0%;margin-bottom: 5px;">
                                            <div class="col-sm-10 col-md-10 col-lg-10" (click)="calldevice(device.did)" style="padding: 0%;padding-left: 3px;">
                                              <p style="margin: 0%;">{{ device.date }} {{ device.time }}</p>
                                            </div>
                                            <div class="col-sm-2 col-md-2 col-lg-2" style="padding: 0%;">
                                              <i class="far fa-comment-alt" md-tooltip="Comment" style="float: right;padding-right: 10px;padding-top: 6px;cursor: pointer;" (click)="openPopup(device)"></i>
                                            </div>   
                                          </div>   
                                        </div>
                                      </div>
                                     </div>
                                   </div>
                                </div>
                           
                                 
                                 <!-- <div [ng2IfScrollbars] style="height: 258px;width: 273px;overflow: auto;">                           
                                  <table  class="table table-striped " style="border: none;">
                                    <thead>
                                    </thead>
                                     <tbody>                             
                                  <tr style="cursor:pointer" (click)="calldevice(device.did)" *ngFor="let device of final_data;let i = index;">
                                     <td  style="font-size: 10px">{{ device.data }} {{ device.address }}                                                              
                                     </td>
                                     <td style="font-size: 10px">{{ device.date }} {{ device.time }} 
                                     </td>                                  
                                  </tr>                            
                                   </tbody> 
                                 </table> 
                      
                                </div> -->
                                </md-menu> 
                     
                           
