Create Custom ion-list

Hi,

I’m trying to create a component to have my own custom ion-list. But i Dont’t know how to make a component which can includes others. for example i would have

<myIonList>
  <ion-item>
    foo 1
  </ion-item>
  <ion-item>
    foo 2
  </ion-item>
</myIonList>

with this component :


@Component({
    selector: 'myIonList',
    templateUrl: '<ion-list style="color: blue;">
	  ?????
	</ion-list>'
})

export class myIonList {
    constructor() {  }
}

Is it possible ?

Thanks in advance

1 Like

what do you exactly want to do because I dont get it

I would like to create a component based on the ion-list. And i would like to be able to put other component in it, like items but i don’t know how to declare it in my componenent. My myIonList should be able to contain every other component in.

Hope you understand me

no I dont to be honest

For exemple i would create an ion-list-blue which change all my ion-item color in blue like in my sample. but i don’t know how to declare my ion-list-blue component

It would look like

<myIonList [input]="myArray"></myIonList>

and then the ts file of myIonList would include
Input() input myArray: Array<typeOfItemInList>
If you wanted to filter the input to the compoment, you could use set/get in the Input() declaration.

Take a look at the official Angular docs for Component. There are several code examples.

yeah but i wouldn’t call it with [input]=“myArray” that but like my sample.

In my Page :

import {myIonList} from "myIonList";

@IonicPage()
@Component({
  template: '
<myIonList>
  <ion-item *ngIf"let item of myItemArray">
       <ion-label>{{item.name}}</ion-label>
  </ion-item>
</myIonList>
'
})

export class myPage{
    constructor() {  }
}


In my Composant

@Component({
    selector: 'myIonList',
    templateUrl: '<ion-list style="color: blue;">
	</ion-list>'
})

export class myIonList {
    constructor() {  }
}

Angular doesn’t work that way.

Ok Thanks for answering

If all you want to do is to change style, just use ngStyle.

In fact I want to automatically add other item inside. I will change my way to do

1 Like