# How to add custom component item to list

**URL:** <https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766>\
**Category:** ionic-v3\
**Created:** [October 26, 2018, 7:24am UTC](https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766 "2018-10-26T07:24:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![netexpo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/netexpo/32/122344_2.png) [@netexpo](https://forum.ionicframework.com/u/netexpo)\
**Post date:** [October 26, 2018, 7:24am UTC](https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766/1 "2018-10-26T07:24:52Z")

</div>

I created a new blank project for testing purposes, with a custom component. It works fine if i use the component in the html of the homepage. But what i want to do, is use the component in a list. This is where i am stuck. Adding items (strings for instance) in the list data is working fine and showing up. But how do i get the rendered html of the component in that list? Need a push in the right direction.

home.html

```auto
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<button ion-button color="light" (tap)="tapEvent($event)">Light</button>
<ion-item *ngFor="let item of items">
      {{item}}
</ion-item>
<test-one></test-one>
</ion-content>

```

home.ts

```auto
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    
    items: string[] = [];

  constructor(public navCtrl: NavController) {
  }
  
  tapEvent(event)
  {
      console.log(event);
      this.items.push("bier!");
  }

}

```

test-one.html

```auto
<!-- Generated template for the TestOneComponent component -->
<div (tap)="tapEvent($event)">
  {{text}}
</div>

```

test-one.ts

```auto
import { Component, ElementRef, Renderer } from '@angular/core';

/**
 * Generated class for the TestOneComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'test-one',
  templateUrl: 'test-one.html'
})
export class TestOneComponent {

  text: string;

  constructor(private element : ElementRef, private renderer : Renderer) {
    console.log('Hello TestOneComponent Component');
    this.text = 'TestOneComponent';
  }
  
  tapEvent(event)
  {
      console.log("TestOneComponent tapEvent");
  }
  
  // Manipulation test
  ngAfterViewInit()
  {
      console.log(this.element);
      this.renderer.setElementStyle(this.element.nativeElement, 'color', '#f00');
  }

}

```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [October 26, 2018, 7:26am UTC](https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766/2 "2018-10-26T07:26:43Z")

</div>

Pay close attention to the “Item Placement” section of [the Item docs](https://ionicframework.com/docs/api/components/item/Item/).

---

<div class="post-metadata">

**Author:** ![lucasbasquerotto](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lucasbasquerotto/32/101719_2.png) [@lucasbasquerotto](https://forum.ionicframework.com/u/lucasbasquerotto)\
**Post date:** [October 26, 2018, 2:19pm UTC](https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766/3 "2018-10-26T14:19:50Z")

</div>

@netexpo If you want to show the `TestOneComponent` in the list, you could change:

```auto
<ion-item *ngFor="let item of items">
      {{item}}
</ion-item>

```

to

```auto
<ion-item *ngFor="let item of items">
      <test-one></test-one>
</ion-item>

```

Also, if you want to pass the text of `item` to `test-one` (otherwise the for-loop seems a bit meaningless), you could change the component to have an `@Input()` to receive it:

```auto
import { Component, ElementRef, Input, Renderer } from '@angular/core';

/**
 * Generated class for the TestOneComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'test-one',
  templateUrl: 'test-one.html'
})
export class TestOneComponent {

  @Input() text: string;

  constructor(private element : ElementRef, private renderer : Renderer) {
    console.log('Hello TestOneComponent Component');
    //remove this: this.text = 'TestOneComponent';
  }
  
  tapEvent(event)
  {
      console.log("TestOneComponent tapEvent");
  }
  
  // Manipulation test
  ngAfterViewInit()
  {
      console.log(this.element);
      this.renderer.setElementStyle(this.element.nativeElement, 'color', '#f00');
  }

}

```

And then use it like:

```auto
<ion-item *ngFor="let item of items">
      <test-one [text]="item"></test-one>
</ion-item>

```

(remember to declare the component in an NgModule that either declares the HomePageComponent or that is imported by another NgModule that declares the home page, otherwise you would receive an error saying that the NgFactory was not found or something along these lines)

You can know more about Angular in following their official tutorial:

[https://angular.io/tutorial](https://angular.io/tutorial)

If you don’t know which component to instantiate beforehand, you could use a more advanced approach with [ComponentFactoryResolver](https://angular.io/api/core/ComponentFactoryResolver), to instantiate with using its reference.

**Update**

Like @rapropos said above, it’s important to take in account item placement. This post is about ionic3, so it would need to have [item-content](https://ionicframework.com/docs/api/components/item/Item/) or some other placement, like:

```auto
<ion-item *ngFor="let item of items">
      <test-one item-content [text]="item"></test-one>
</ion-item>

```

(In v4 you should need to use `slot`)

---

<div class="post-metadata">

**Author:** ![netexpo](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/netexpo/32/122344_2.png) [@netexpo](https://forum.ionicframework.com/u/netexpo)\
**Post date:** [October 30, 2018, 8:03am UTC](https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766/4 "2018-10-30T08:03:50Z")

</div>

This helped me so much! Thanks.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:12pm UTC](https://forum.ionicframework.com/t/how-to-add-custom-component-item-to-list/145766/5 "2021-07-19T21:12:12Z")

</div>

Closed on July 19, 2021, 9:12pm UTC