title: How to use one component inside another component in ionic?
body: <p>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 <strong>components.module</strong> 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.</p>
  <p><strong>I have already looked on other questions with closer topics on stackoverflow but I have not found any solution</strong></p>
  <p><strong>Code of my list component is:</strong></p>
  <pre><code>&lt;ion-list class=&quot;element-background&quot;&gt;
     &lt;ion-item class=&quot;element-background&quot; *ngFor=&quot;let item of bills; let i = index&quot;
  lines=&quot;none&quot;&gt;
       &lt;div class=&quot;elements-container&quot; (click)=&quot;billTapped(item)&quot;&gt;
         &lt;ion-icon class=&quot;transparent-item-icon&quot; src=&quot;./assets/icon/new-icon.svg&quot; &gt;&lt;/ion-icon&gt;
   
    &lt;div class=&quot;section-text-container&quot;&gt;
      &lt;ion-label class=&quot;label&quot;&gt;
        {{ item.number}}
      &lt;/ion-label&gt;
      &lt;ion-label class=&quot;label&quot;&gt;{{ item.expiry}}&lt;/ion-label&gt;
      &lt;ion-label class=&quot;label&quot;&gt;{{ item.bill}}&lt;/ion-label&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/ion-item&gt;
   &lt;/ion-list&gt;
  </code></pre>
  <p><strong>I would like to make item separate component, like that:</strong></p>
  <pre><code> &lt;div class=&quot;elements-container&quot; (click)=&quot;billTapped(item)&quot;&gt;
      &lt;ion-icon class=&quot;transparent-item-icon&quot; src=&quot;./assets/icon/new-icon.svg&quot; &gt;&lt;/ion-icon&gt;
   
      &lt;div class=&quot;section-text-container&quot;&gt;
        &lt;ion-label class=&quot;label&quot;&gt;
        {{ item.number}}
        &lt;/ion-label&gt;
        &lt;ion-label class=&quot;label&quot;&gt;{{ item.expiry}}&lt;/ion-label&gt;
        &lt;ion-label class=&quot;label&quot;&gt;{{ item.bill}}&lt;/ion-label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>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</p>