CODEWITHSUNDEEP
angularionic-frameworkionic4
leo giovanni
leo giovanni

Reputation: 61

How to use one component inside another component in ionic?

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

Upvotes: 0

Views: 3924

Answers (1)

Wesley
Wesley

Reputation: 844

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>

Upvotes: 1

Related Questions