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
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.
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