Removing the clicked item from menu list using angular 4

Question

Hi,

I have a notification menu list in which i am binding the data which is coming from the REST API. My notification menu will look like this. See below image for clarity.

In the notifications, when ever i click on any of the list item then it should be removed from the list and on the above also there is notification bubble in red color with some count that how many notifications i have received. What i want to achieve is when i click on the notification menu list then the clicked list item should be removed from it also the count should decrease in red color bubble above the bell icon. For example, when i click on notification list item of first item the it should be removed as well as the count should be decreased.

notification.component.ts

try {

      this.currentUser = JSON.parse(this.cookieService.get('user-is-logged-in-details'));
      console.log(this.currentUser.uid);
      this._userService.getBellNotification(this.currentUser.uid)
      .subscribe(data => this.cookieData = data); 
      } catch (e) {
          console.log("Catch Block Error from Notification.Component.ts");
          //console.log("currentUser", this.currentUser.uid);
      }

apiservice.service.ts

getBellNotification(uid: any){
        const urlBell = this.config.apiUrl+'api/supplier-notification/'+uid+'?_format=json';
        let headers = new Headers();        
        headers.append("Content-Type", 'application/json');
        headers.append('Authorization', 'Basic ' + btoa('apiuser:@piUser@2017Supplier'));
        let requestoptions = new RequestOptions({headers: headers});
        return this.http.get(urlBell, requestoptions)
        .map(response => response.json())
        .catch(this.handleErrorObservable);
    }

notification.component.html

<span 
    class="notification" 
    dropdown (onShown)="onShown()" 
    (onHidden)="onHidden()" 
    (isOpenChange)="isOpenChange()">
    <a
        href dropdownToggle 
        (click)="false">
        <i 
        class="glyphicon glyphicon-bell" 
        [ngClass]="cookieData?.search_unread_count != 0 ? 'notification-icon': ' '">
    <span *ngIf="cookieData?.search_unread_count != 0">{{cookieData.search_unread_count}}</span> 
    </i>
    </a>
      <ul 
        *dropdownMenu 
        class="dropdown-menu notify-drop">
          <div 
            class="notify-drop-title">Notifications</div>
            <div 
                class="drop-content" 
                *ngFor="let item of cookieData.search_result">
                <li 
                    data-id="{{item.id}}" 
                    class="notification-items unread">  
                    <i 
                        class="fa fa-dot-circle-o" 
                        aria-hidden="true">
                    </i>
                    <a 
                        data-link="admin-invoice-list" 
                        href="javascript:;">{{item.message}}
                    </a>
                </li>
            </div>
      </ul>
</span>

Can anyone please suggest me how it can be achieved?

Answer 1

have youtried to attach a (click) function on each

so to remove (or do the action you want) on the click of

item?...something like:

 <div 
                class="drop-content" 
                *ngFor="let item of cookieData.search_result">
                <li (click)="remove(item)"
                    data-id="{{item.id}}" 
                    class="notification-items unread">  
                    <i 
                        class="fa fa-dot-circle-o" 
                        aria-hidden="true">
                    </i>
                    <a 
                        data-link="admin-invoice-list" 
                        href="javascript:;">{{item.message}}
                    </a>
                </li>

then in your ts file:

   remove(item:any){
    //ALSO CALL A BACKEND API... TO REMOVE THEM .. THIS IS ONLY FRONT END
    this.cookieData = this.cookieData.filter(xx=>xx.id != item.id);
      this.cookieData.search_unread_count=this.cookieData.search_result.length;
    }

Hope it helps you!!

Answer 2

@federico scamuzzi ise explained what you missed exactly. but him answer is need some correction for your objects and requirements. I have update that in here, try it and let me know if you have any clarification.

           <div 
            class="drop-content" 
            *ngFor="let item of cookieData.search_result">
            <li (click)="remove(item)"
                data-id="{{item.id}}" 
                class="notification-items unread">  
                <i 
                    class="fa fa-dot-circle-o" 
                    aria-hidden="true">
                </i>
                <a 
                    data-link="admin-invoice-list" 
                    href="javascript:;">{{item.message}}
                </a>
            </li>

and your remove function should be

remove(item:any){
    //ALSO CALL A BACKEND API... TO REMOVE THEM .. THIS IS ONLY FRONT END
    this.cookieData.search_result = this.cookieData.search_result.filter(xx=>xx.id != item.id);
    this.cookieData.search_unread_count=this.cookieData.search_result.length;

    }