Removing the clicked item from menu list using angular 4 - arrays

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

#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;
}

Answer 2

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!!