Ion-list child not rendering when using nested ion-item

Ionic Framework ionic-v3
1

I am trying to create a ion-list with multiple checkboxes but the code below is rendering on first ion-item (Group # 01) and the other ion-item and nested items are not appearing.

<ion-list>
    <ion-item>
        Group # 01
        <ion-icon [name]="'ios-add-circle-outline'" item-right></ion-icon>
    </ion-item>
    <ion-item>
        <div>
            <ion-item>
                <ion-label>Item 1</ion-label>
                <ion-checkbox color="dark"></ion-checkbox>
            </ion-item>
        </div>
        <div>
            <div>
                <ion-item>
                    <ion-label>Item 2</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
                </ion-item>
                <ion-item>
                    <ion-label>Item 3</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
                </ion-item>
                <ion-item>
                    <ion-label>Item 4</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
                </ion-item>
            </div>
            <div>
                <ion-item>
                    <ion-label>Item 5</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
                </ion-item>
                <ion-item>
                    <ion-label>Item 6</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
                </ion-item>
                <ion-item>
                    <ion-label>Item 7</ion-label>
                    <ion-checkbox color="dark"></ion-checkbox>
                </ion-item>
            </div>
        </div>
    </ion-item>
</ion-list>
2

Everything you put inside an ion-item needs a where-to-place-this attribute or it will be placed in a way you might not expect. Try putting item-content in your nested div, or in your nested ion-item. Take a look at the item api and you’ll see what I mean.

4

@AaronSterling is correct here.

Item is not a “simple” component as it was in ionic 1.
If content inside the item does not match where is meant to go, it will not render.
This is part of the web components spec.