Ion-label component inside the stencil-component-starter not getting rendered

Stencil
1

I cloned the stencil-component-starter from:

Then on the file: my-component.tsx I have the following code:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @Prop() minHeartRate: number;
  @Prop() maxHeartRate: number;

  render() {
    return (
      <div>
        Athlete: {this.first} {this.last} - Heart Rate Range:
        <ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
          <ion-label range-left>0</ion-label>
          <ion-label range-right>200</ion-label>
        </ion-range>
      </div>
    );
  }
}

as you can see here:

[Before] It was getting rendered almost properly with two issues 1 and 2:
[Now] It is not getting rendered at all. So, there are three issues 1, 2 and 3:

  1. The <ion-label/> tags are ignored.

  2. Each knob can move beyond of the other knob (please, ignore this, I think this is on purpose on new version).

  3. This is a new issue that I just detected (Current time: 2018-08-26 19:20). Like 12 hours ago (check timestamp on the repo) the repository: https://github.com/napolev/stencil-ion-range/ on commit 12c14b75cca92f19af6c5ccae60091319578cec7 was generating almost properly the <ion-range/> tag above, except issues 1 and 2 (check image below). But now after a clean install of this repository it doesn’t render what you see on the image below anymore. This is weird. After doing that commit I checked that after a clean install it rendered that.

Here is what it was rendering before, that it is not getting rendered anymore:

enter image description here

Reference:

Any idea on how to solve this issue?

Thanks!

[EDIT 1]

There is a parallel discussion for this topic on:

2

based on the latest 4.0 beta… I still do think there is a bug in the styling of the labels by default, but this is a work-around

reference to the doc since stencil uses ionic v4 - https://beta.ionicframework.com/docs/api/range

<ion-range mode="ios" 
           dualKnobs={true} 
           min={0} max={200} 
           step={2} pin={true} 
           snaps={true} 
           value={{lower: 89, upper: 150}}>
   <ion-label slot="start" style={{flex: 'none',padding:'10px'}}>0</ion-label>
   <ion-label slot="end" style={{flex: 'none',padding:'10px'}}>200</ion-label>
</ion-range>

enter image description here

3

Aaron, I added the code you suggested as you can see here:

but when running the code with: $ npm start the following is what is get rendered:

enter image description here

did you get the component rendered properly?

I removed the node_modules directory and installed them again with no success.

could you maybe try my repository?

as you can see, I have done just 2 commits on top of the official commits:

Just in case here are the versions I’m using for the primary tools:

$ node -v
v8.11.2

$ npm -v
6.1.0

$ ionic -v
ionic CLI 4.1.1
4

so after looking at this project, it appears that this project doesnt have ionic4 in it by default.

if that is what you are looking for, they I would suggest using the PWA starter project - https://ionicframework.com/pwa/toolkit

you can add ionic to this project, but I would suggest starting with a boilerplate that is already set

1 Like
5

Thank you Aaron for your suggestion.

My main goal by using: stencil-component-starter is to create my custom component including at the same time some Ionic 4 components inside it

I tried the Ionic PWA Starter Kit and I could create successfully a custom component including the Ionic components that didn’t get rendered before but now I don’t know how to export just my custom component (not the whole app).

If the Ionic PWA Starter Kit doesn’t let me to export my custom component to a separate file, that’s not an option for me.

Here I created a new discussion thread with more details (I mentioned you there):

Any idea about what to try next?