ionic 8 custom component does not render

I created a custom component that has a .ts look like below:

@Component({
selector: 'app-top-recommendations',
templateUrl: './top-recommendations.component.html',
styleUrls: ['./top-recommendations.component.scss'],
imports: [
CommonModule,
IonicModule,
FormsModule
],
})
export class TopRecommendationsComponent implements OnInit {
...


it is embedded on tab1.html like this

<app-top-recommendations [doRefresh]="doRefreshMainInsights"></app-top-recommendations>


the tab1.ts is like below

@Component({
selector: 'app-tab1',
templateUrl: 'tab1.page.html',
styleUrls: ['tab1.page.scss'],
standalone: false,
})
export class Tab1Page implements OnInit{
...


I do not see any error when I build but the content of top-recommendations component does not show up either.

i am using ionic 8 with angular.

Continue reading...