Question: After I press delete button, the message gets deleted from database but I have to refresh the page to see the message disappear from page. 

dashboard.component.html

```
<h2 *ngIf="user"> Hello, {{user.username}} </h2>
<a [routerLink]="['/']">Log Out</a>

<form (submit)="createMessage()">
<label>Message</label>
<input type="text" name="message" [(ngModel)]="message.message">
<input type="submit" value="create new message">
</form>

<div *ngFor="let message of messages">
<h1>{{message.userId.username}}</h1>
<h3>{{message.message}}</h3>
<h2 *ngIf="user.username === message.userId.username"> 
<form (submit) = "delete(message._id)">
    <button type="submit" name="" value="">DeleteOne</button>
</form>
</h2>
<hr>
</div>

```

dashboard.component.ts

```
export class DashboardComponent implements OnInit {
messages: Message[] =[];
user: User;
message: Message = new Message();
currentId;

constructor(public _user: UserService, public _router:Router,private 
_route: ActivatedRoute, private _message: MessageService) {
this.user = _user.currentUser;
this._route.params.subscribe((param)=>{
console.log("task details url id is: ", param.id);
this.currentId = param.id;
})
}

delete(val) {
console.log("delete method!", val);
 this._message.delete({id: val})
 .then((data)=>{
})

```

Answer: 
You may remove it from array once deleted, or you also can get the data back and re initialize your array.

```
delete(val) {

 this._message.delete({id: val})
.then((data)=>{
     this.messages.remove(this.messages.findIndex((message => message._id === val));
  });
}

```
The reason why your message is not removed from the UI is because your messages array is not updated. In order to do this you have 2 options: 

* Remove the element manually from the messages array.
* Once the delete() function is resolved (inside the then or the subscribe) make another call to the backend to retrieve the current status of the messages and assign it to the messages array.