Alignment issue inside Angular2 directives

[dgroh]

We are developing an App with Ionic2 wich is built on top of Angular2

I have the following directive:

@Component({
    selector: "round-slider",
    directives: [IONIC_DIRECTIVES],
    templateUrl: "build/pages/learning/components/round-slider/round.slider.html"
})
export class RoundSlider {
    protected ngAfterViewInit(): void {
        let $slider = (<any>$("#slider"));
        $slider.roundSlider({
            radius: 120,
            width: 12,
            handleSize: "+18",
            handleShape: "dot",
            sliderType: "min-range",
            value: 65
        });
    }
}

This is the final result (value is not centered):

This only happens inside the Angular2 events tho. If I do this inside an ionic2 view event, such as ionViewDidEnter it works fine.

[soundar24]

Can you confirm me whether are you using roundSlider v1.3 or any lower version ?

[dgroh]

Yes, it is the v1.3

[soundar24]

I can't reproduce this issue in Angular sample, is there any way to reproduce in my side ? Or can you provide a link hosted this sample to reproduce this ?

[dgroh]

Did you use Angular2 and has created a directive for that and initialized in as I did in the code snippet above? I'll create a repo to reproduce it and I'll post it here, give me one / two days for that, because I also have to setup the Ionic2 environment and so on...

[soundar24]

ya sure, you can share in any of the way..
I tried in a angular sample but not exactly you mentioned.. If possible you can host the sample in your server and update me the link..

Meanwhile, as a workaround just try the below code..

export class RoundSlider {
    protected ngAfterViewInit(): void {
        let $slider = (<any>$("#slider"));
        $slider.roundSlider({
            radius: 120,
            width: 12,
            handleSize: "+18",
            handleShape: "dot",
            sliderType: "min-range",
            value: 65, 
            create: function () {
                this._updateTooltipPos();   // try this, if not works then try the below

                //var that = this;
                //setTimeout(function(){
                //    that._updateTooltipPos();
                //},10);
            }
        });
    }
}

Hope this definitly works, since "_updateTooltipPos" function refreshes the tooltip position to center.

[dgroh]

Hi, thanks..

So I tried both ways and that is what I got:

It's a hybrid app, so I cannot host it, that is why I need to create a repo. Would you be able to test Ionic2? You would need node, typescript and so on. If you want I can write all the steps in a readonly file when I create the repo.

But for now, no worries, as I said, it works if it's not in the directive hooks of Angular2, here is the code which works:

import {Component} from "@angular/core";
import {NavController, NavParams} from "ionic-angular";
import {BackendService} from "../../../backend/backend.service";
import {CheckinModel} from "./checkin.model";
import {ComponentBase} from "../../component.base";
import {SearchResultComponent} from "../../components/search-result/search.result.component";
import {HeaderContentComponent} from "../../components/header-content/header.content.component";
import {RequirementsComponent} from "../components/requirements/requirements.component";
import {RoundSlider} from "../components/round-slider/round.slider.component";

@Component({
    templateUrl: "build/pages/learning/checkin/checkin.html",
    directives: [SearchResultComponent, HeaderContentComponent, RequirementsComponent, RoundSlider]
})
export class CheckinComponent extends ComponentBase<CheckinModel> {
    constructor(nav: NavController, params: NavParams, backendService: BackendService) {
        super(nav, params, backendService);
    }

    // TODO: This has to come from json and mapped in model
    public requirements: Array<string> = ["Lorem ipsum dolor", "sit amet", "consectetur adipiscing elit", "sed do eiusmod tempor", "incididunt ut labore"];

    protected ionViewLoaded(): void {
        let target = this.params.get("target");
        this.loadNavigation(target, (condition) => {
            let model = new CheckinModel();
            model.title = condition.title;
            model.target = condition.target;
            model.type = condition.type;

            this.models.push(model);
        });
    }

    // There is an issue with RoundSlider which is described here: https://github.com/soundar24/roundSlider/issues/41
    // That is why we can not move the code below inside the directive
    protected ionViewDidEnter() {
        let $slider = (<any>$("#slider"));
        $slider.roundSlider({
            radius: 120,
            width: 12,
            handleSize: "+16",
            handleShape: "dot",
            sliderType: "min-range",
            value: 65,
            editableTooltip: false
        });
    } 
}

The problem with this code, is that I have other pages using the slider, so there is code replication if I keep like that, that why I want to extract it to a directive, but in the directive we have this problem with the tooltip positioning

[soundar24]

Actually i didn't work on Ionic2 previously however that's not a problem, i will check with any examples and try.. Also i will prepare the environment to work on Ionic 2.. while provide the repo you can share with the steps itself.. so that i can easily test in my side.. thanks :)