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

```
I guess \_message.delete returns a promise here? One thing you could do is, when the promise resolves, reload your data (where the deleted record is not present anymore)

**Here:**

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

```