Angular 5 Datatables pop up a warning alert when re render - html

Question

I had succeed on creating a table and implement datatable on my angular 5 project
html code for the table:
<table class="table table-hover mt-3" datatable [dtOptions]="dtOptionsContent" [dtTrigger]="dtTriggerContent">
<thead>
<tr>
<th scope="col">Content Type</th>
<th scope="col">User Occupation</th>
<th scope="col">Content Name</th>
<th scope="col">Carrot</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let reward of rewards" >
<td data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{getRewardType(reward.type)}}</td>
<td data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{getRoleType(reward.role)}}</td>
<td data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{reward.name}}</td>
<td data-toggle="modal" data-target="#seeDetail" (click)="onSelect(reward)">{{reward.carrot}}</td>
</tr>
</tbody>
</table>
.ts code for the datatable settings:
dtOptionsContent: DataTables.Settings = {};
dtTriggerContent: Subject<any> = new Subject();
#ViewChild(DataTableDirective)
dtElementContent: DataTableDirective;
.ts for get rewards:
getRewards(): void
{
this.adminService.getRewards().subscribe(rewards=> {
this.rewards = rewards;
this.dtTriggerContent.next();
});
}
The sorting, pagination, and searching are functional and when i add/delete a content to the table , the table is updated.
However, after updated, when i tried the sorting and pagination, the table content revert to the pre-added/deleted list.
I've tried destroy and rerender the table. This is the .ts code for adding content:
addSocial(role: number, rewardName: string, carrot: number): void
{
this.dtElementContent.dtInstance.then((dtInstance: DataTables.Api) => {
let currentCarrot = 0;
if(!isNaN(carrot))
{
//Setting for rewardTemp goes here
this.adminService.addReward(this.rewardTemp)
.subscribe(reward => {
dtInstance.destroy();
this.rewards.push(reward);
this.dtTriggerContent.next();
});
//Success Notification goes here
}
else
//Error Notification goes here
});
}
while it succeed to sorting the updated content after the list was updated, it spawn warning alert after rerender.
The alert contains "DataTables warning: table id=DataTables_Table_1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3"
What is wrong??