How use ng-content within an ion-item?

Ionic Framework ionic-v3
1

Hi folks –

I’m trying to create an item-control component which renders an ion-item and an ion-label. It transcludes the actual form control (e.g., an ion-input). The idea is to ensure that form labels, error messages, etc. are rendered consistently throughout my app.

However, the transclusion isn’t working – and I can’t figure out why.

This example usage demonstrates how I want to use this component:

<item-control label="Email address" [required]="true">
    <ion-input type="email"></ion-input>
</item-control>

Here’s my item-control.component.ts:

import { Component, Input } from '@angular/core';

@Component({
    selector: 'item-control',
    templateUrl: './item-control.component.html'
})
export class ItemControl {
    @Input() label: string;
    @Input() required: boolean = false;
}

And here’s item-control.component.html:

<ion-item>
    <ion-label floating [class.required]="required">
        {{ label }}
    </ion-label>
    <ng-content></ng-content>
</ion-item>

The ng-content simply doesn’t get rendered – I just get an ion-item containing ion-label as its only child.

If I move the ng-content outside of the ion-item, then transclusion works:

Also, I discovered that adding the attribute item-content to the ng-content gets transclusion to work (even when ng-content is inside of the ion-item):

<ng-content item-content></ng-content>

But it doesn’t render correctly – the input appears behind the label. So that obviously isn’t right.

Does anyone know how to get this working?

2 Likes