Import custom components inside a custom component

I have a few custom components which I want to split up in multiple sub-components. The problem is that in Ionic V4 it seems to be that I can not import custom components inside custom components

My main component

<ion-list>
  <ion-item *ngFor="let activity of activities">
    <app-activity></app-activity>
  </ion-item>
</ion-list>

The sub-component I intend to use in the main component
<div>
  <p>{{activity.date}}</p>
  <p>{{activity.activityName}}</p>
  <p>{{activity.activityMsg}}</p>
  <p *ngFor="let label of activity.activityLabels">{{label}}</p>
</div>

In order to maximize the chances of you getting timely and useful suggestions, it really helps to structure your questions like this:

  • what I am trying to do (as broadly as possible, to avoid overly intense focus on the wrong place)
  • enough code so that anybody reading can replicate the situation
  • precisely how this code behaves differently from desired