I have an html structure with a component inside a component (forgot the proper word for it).

working basicly like this (largely simplified):

main html:

```
<div *ngFor="let item of data">
  <app-item [item]="item"></app-item>
</div>

<button (click)="addItem()">Add</button>

```

item html: 

```
<div>{{item.name}}</div>

<button (click)="deleteItem()">Delete</button>

```

inside the app-item I display several items out of a list. The list gets it's data straight out of the database via an http.get request.

Now I also have functionality to add or delete items which both work (items get added or removed respectively to or from the database just fine). Though the change detection does not pick any of it up and the site needs to be refreshed (via F5 for example) to display the changes.

I checked the code (not all of it is from me) and couldn't find any specified change detection strategie.

I also tried to manually tigger change detection from the add and delete function via the ChangeDetectorRef (`this.ref.detectChanges();`).
Though that also did not take away the need to manually refresh the page to see the changes.

Now what am I missing for change detection to pick this up? Or alternatively, how can I manually trigger it within my add/delete methods?