Ion-range doesn't render ng-content (projection)?

Ionic Framework ionic-v3
1

I’m trying to make at tidy version of the ion-range component that allows for values such as 0.05 and relevant ‘steps’. This is just an automation of the idea of multiplying the value by some constant when changed, and dividing by the same constant when displaying. It’s been discussed here before.

example:

        <ion-item>
            <ion-label>Discharge Voltage -
                <ion-badge>{{preset.discharge_voltage}}V</ion-badge>
            </ion-label>
            <ion-range [ngModel]="preset.discharge_voltage * 10"
                       (ngModelChange)="preset.discharge_voltage=$event/10"
                       [min]="this.preset.dischargeVoltageMinMax().min * 10"
                       [max]="this.preset.dischargeVoltageMinMax().max * 10">
                <ion-label range-left>{{this.preset.dischargeVoltageMinMax().min}}V</ion-label>
                <ion-label range-right>{{this.preset.dischargeVoltageMinMax().max}}V</ion-label>
            </ion-range>
        </ion-item>

I’m trying to generalize this. However; I can’t get the ion-range component to render ng-content. At all. The content will render if I have my block outside of ion-range. Any way around this? Looks like ion-range doesn’t render subcontent (i.e: doesn’t do projection), but I can’t find the src to look at to confirm that (not sure where to find the ion-range template, if it even exists anywhere).

better-range.ts

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

@Component({
    selector: 'better-range',
    templateUrl: 'better-range.html',
})
export class BetterRangeComponent {
    @Input() disabled: boolean = false;
    @Input() pin: boolean = false;
    @Input() multiplier: number = 1;
    @Input() min: number = 0;
    @Input() max: number = 10;

    @Input() value: number = 0;
    @Output() valueChange: EventEmitter<any> = new EventEmitter();

    constructor() {
    }
}

better-range.html

<ion-range [ngModel]="value * multiplier"
           (ngModelChange)="value=$event / multiplier"
           pin="{{pin}}"
           disabled="{{disabled}}"
           [min]="min_val * multiplier"
           [max]="max_val * multiplier"
>
    <ng-content></ng-content>
</ion-range>

Resulting render:
08 AM

Any suggestions or ideas I might try?
Where would I find the template source for ion-range, to check my assumption?

2

I forgot to add, here’s how I’m using better-range within a templalte:

            <ion-label>Discharge Current -
                <ion-badge>{{preset.discharge_current}}A</ion-badge>
            </ion-label>
            <better-range item-content style="width: 100%" [(value)]="preset.discharge_current"
                          min="0.05"
                          [max]="chargerService.getMaxAmpsPerChannel()"
                          multiplier="100"
            >
                Huzzah
                <ion-label range-left>0.05A</ion-label>
                <ion-label range-right>{{chargerService.getMaxAmpsPerChannel()}}A</ion-label>
            </better-range>

The idea is that I can use ion-labels within the better-range component, just as I would with a normal ion-range.
You’ll note the “Huzzah” isn’t rendered either.

3

Stock template for ion-range is inlined in here.

4

I’m having a similar problem with ion-item. I’m trying to wrap ion-item in a custom component named item-control, which renders a single ion-item form control with inputs for label, a “required flag”, validation messages, etc.

As in your case, ng-content fails to render when it’s inside my ion-item, but renders fine if placed outside.

I found that adding the attribute “item-content” to my ng-content element got the transclusion to work, although it still doesn’t render quite right:

<ion-item>

    <ion-label floating>
        {{ label }}
    </ion-label>

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

</ion-item>

The presence of that attribute seems to tell ion-item that the ng-content component is acceptable in that location. But, I obviously don’t have it implemented correctly – or I could be on the wrong track altogether.

5

Thanks for that.
Reading that template - do I read it right?
There’s a ng-content for range-left and range-right, but no other ng-content element. Does this mean that no content can ever be embedded within the ion-range element? It would explain why my ng-content elements are not being rendered. Or do I misunderstand how components are supposed to render child elements placed inside their tags?

I’m expecting to see that a has to exist in the template for the child elements to be rendered.

6

I would agree with that assessment.