How to use one component inside another component in ionic?

Issue

I have a component which shows the list of items. I would like to create a separate component for my item and then use it inside a list. In this way I can use the item element in multiple time in different parts of an app. But components do not have module file like pages. I have one components.module file in which I am importing all the components and then I use that file in pages module file and then use components in pages.

I have already looked on other questions with closer topics on stackoverflow but I have not found any solution

Code of my list component is:

<ion-list class="element-background">
   <ion-item class="element-background" *ngFor="let item of bills; let i = index"
lines="none">
     <div class="elements-container" (click)="billTapped(item)">
       <ion-icon class="transparent-item-icon" src="./assets/icon/new-icon.svg" ></ion-icon>
 
  <div class="section-text-container">
    <ion-label class="label">
      {{ item.number}}
    </ion-label>
    <ion-label class="label">{{ item.expiry}}</ion-label>
    <ion-label class="label">{{ item.bill}}</ion-label>
    </div>
   </div>
  </ion-item>
 </ion-list>

I would like to make item separate component, like that:

 <div class="elements-container" (click)="billTapped(item)">
    <ion-icon class="transparent-item-icon" src="./assets/icon/new-icon.svg" ></ion-icon>
 
    <div class="section-text-container">
      <ion-label class="label">
      {{ item.number}}
      </ion-label>
      <ion-label class="label">{{ item.expiry}}</ion-label>
      <ion-label class="label">{{ item.bill}}</ion-label>
    </div>
</div>

And then use it inside the list component but I have not yet found a way to import one component inside another in ionic. If anyone knows then please let me know. Thanks

Solution

This has to do with Angular, not Ionic. Use the selector of your child component inside your parent component.

In child component ts file:

@Component({
  selector: 'app-child-component', // <---- This is the selector name
  templateUrl: 'child-component.page.html',
  styleUrls: ['child-component.page.scss'],
})

In parent component HTML file:

<app-child-component></app-child-component>

Answered By - Wesley