3

I faced this situation using AngularJS, this was the reason of the post How to initialize the value of an input[range] using AngularJS when value is over 100.
I was wondering that Angular2 manage better initialization of a value that is outside the default range [0,100] and inside a [min,max] range.

The code I build trying to learn Angular2, is nearly a translation of the previous post: 

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.min.js"></script>

<script>
(function (app) {
    app.AppComponent = ng.core.Component({
	    selector: 'my-app',
	    template: '	{{ctrl.min}}<input type="range" [(ngModel)]="ctrl.value" min="{{ctrl.min}}" max="{{ctrl.max}}" />{{ctrl.max}}<br/>value:{{ctrl.value}}'
	})
	.Class({
	    constructor: function() {
		  this.ctrl = { min:50, max:150, value:150};
	    }
	});
})(window.app || (window.app = {}));

(function (app) {
	document.addEventListener('DOMContentLoaded', function () {
	   ng.platform.browser.bootstrap(app.AppComponent);
	});
})(window.app || (window.app = {}));
</script>
 
</head>
<body>
   <my-app>Loading...</my-app>
</body>
</html>

Running this snippet give this result :

enter image description here

The slider is at the position 100, but it should be at position 150. The expecting result is :

enter image description here

Is there a way to set consistently the 3 values (min, max and value), without the limitation of [0,100] for the value ?

Is it possible to update the DOM after initializing range and before setting the initial value ?

Improve this question

1 Answer 1

Reset to default
4

My favorite way of determining ordering like this (no idea if it's the right way), is to simply defer it with a setTimeout.

  constructor() {
        this.min = 50;
        this.max = 150;
        setTimeout(() => this.value = 150);
  }

You don't need to set an actual timing value. This will just make sure this.value isn't set until the next change detection cycle.

See here for a live demo.

Improve this answer
3
  • I thought about this, but as I made a AJAX call that get a JSON lists of 'min','value','max'. This need to parse specifically the value to introduce this deffered setting.
    – mpromonet
    Commented Aug 9, 2016 at 18:57
  • @mpromonet How does that change things? `http.get('/foo').subscribe((res) => { this.min = res.min; this max = res.max; setTimeout(() => this.value = res.value); })
    – Jack Guy
    Commented Aug 9, 2016 at 19:17
  • I tried to use http.get('/controls').subscribe(function(data) { this.controlList = data.json(); } and an *ngFor="let control of controlList" to iterate on the array of controls. Your solution needs extra code to store the http answer.
    – mpromonet
    Commented Aug 9, 2016 at 20:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.