One way binding in angular2 doesnt work

Question

<progress-bar [value]="currentProgressValue" [max]="currentProgressMaxValue" [title]="currentTaskName"></progress-bar>

If I use it like

<progress-bar [value]="30" [max]="100" [title]="abc"></progress-bar>

It works, but if I use the above it doesnt.

Edit: I'm using this package :https://github.com/pleerock/ngx-progress-bar/blob/master/src/index.ts

I have this code in my view,

here's my viewmodel

@Output() public currentProgressValue: number
@Output() public currentProgressMaxValue: number
@Output() public currentTaskName: string


pushTask(maxValue: number, isIndeterminate: boolean = true, taskName: string) {

    var token = new ProgressToken(maxValue, isIndeterminate, taskName);

    token.subscribe((x) => {
        if (this.currentToken == null || this.currentToken == token) {
            this.currentProgressValue = x;
            this.currentProgressMaxValue = token.maxValue;
            this.currentTaskName = token.taskName;
            console.log(this.currentProgressValue)
        }

        if ((this.currentToken == token && x >= token.maxValue)) {
            this.activeTasks = this.activeTasks.filter((x) => x != token);
            var nextTask = this.activeTasks.find(x => x != null);
            if (nextTask != null) {
                this.isCurrentProgressIndeterminate = nextTask.isIndeterminate;
                this.currentProgressMaxValue = token.maxValue;
                this.currentProgressValue = x;
                this.currentToken = nextTask;
            }
        }
    });

    this.activeTasks.push(token);

    return token;
}

I see that the properties change if I debug them but the UI doesnt update. What am I doing wrong?

Here's the code I use to test it :

ngOnInit() {
    if (isBrowser) {
        this.progressToken = this.progress.pushTask(100, true, "Doing work");
        var prog = 0;
        let timer = TimerObservable.create(2000, 1000);

        this.subscription = timer.subscribe(t => {
            this.progressToken.next(this.v)
            this.v = this.v + 1;
        });

    }
}


import { Subject } from 'rxjs/Subject'
import 'rxjs/Rx';


export class ProgressToken extends Subject<number> {

    isIndeterminate: boolean
    currentValue: number
    maxValue: number
    taskName: string

    constructor(maximumValue: number, isIndeterminate: boolean, currentTaskName: string) {
        super();
        this.taskName = currentTaskName;
        this.maxValue = maximumValue;
        this.isIndeterminate = isIndeterminate;
    }


}

Here's how I import my component :

import { ProgressComponent } from '../progress/progress.component'

@Component({
    selector: 'login-component',
    templateUrl: './login.component.html',
    providers: [ProgressComponent]
})

And ProgressComponent is marked with Injectable(), then use it in the constructor as

private progress: ProgressComponent

Referring to this answer : https://stackoverflow.com/a/39801791/4487530

why all these vars are annotated with @Output()? Output is usually an rxjs subject that is used to pass data from child to parent. — Julia Passynkova, Apr 18 '17 at 11:22
@JuliaPassynkova remainers of my desperate tries to fix it. I did try it without them — Christo S. Christov, Apr 18 '17 at 11:23
post more code. Try to check first that progress-bar work with dynamic data. — Julia Passynkova, Apr 18 '17 at 11:27
i=0; setInterval(()=> { this.currentProgressValue=i++; this. currentProgressMaxValue=i++;}, 1000); does it work? — Julia Passynkova, Apr 18 '17 at 11:28
@JuliaPassynkova honestly, i dont think anyone would publish a package which works with static only data, haha. Anyway I can see that the data is updated in the viewmodel but it doesnt reflect in the UI. — Christo S. Christov, Apr 18 '17 at 11:28
@JuliaPassynkova it works with this! anyway I guess its something related to the way I call it, i will post the rest of the code then — Christo S. Christov, Apr 18 '17 at 11:32
@JuliaPassynkova I checked the value and it gets updated in the subscribe lambda, i think its something related to the way observables work.. not sure, if I should call it on the main thread in a way.. — Christo S. Christov, Apr 18 '17 at 11:38
Put `console.log(this)` front of `console.log(this.currentProgressValue)`. Is it your component instance? — yurzui, Apr 18 '17 at 11:44
@yurzui havevnt checked the hashes, but properties are the same, posted code on how I import it, I expect it to by singleton — Christo S. Christov, Apr 18 '17 at 11:49

One way binding in angular2 doesnt work

0 Answers0