Determinate progress-bar broken in @angular rc1

[Pixcell]

Note: for support questions, please use one of these channels:
https://github.com/angular/material2/blob/master/CONTRIBUTING.md#question.
This repository's issues are reserved for feature requests and bug reports.

• Do you want to request a feature or report a bug?

Bug

• What is the current behavior?

Determinate progress bar always at 100% (or 0, can't tell)

• If the current behavior is a bug,
  please provide steps to reproduce and if possible a minimal demo of the problem
  via https://plnkr.co or similar.

<p> <span>PID completion {{h.pid.percentage}}%</span><span *ngIf="h.pid.warning">{{h.pid.warning}}</span> <md-progress-bar mode="determinate" color="{{getColor(h.pid.percentage)}}" value={{h.pid.percentage}}></md-progress-bar> </p>

• What is the expected behavior?

Progress bar to be filled with the correct percentage

• What is the motivation / use case for changing the behavior?
• Which version of Angular and Material, and which browser and OS does this issue affect?
  Did this work in previous versions of Angular / Material?
  Please also test with the latest stable and snapshot versions.

Chrome latest version. @angular2-material.alpha.4. @angular2.rc.1

• Other information
  (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix)

[devversion]

I tested that locally and it seems to be fixed within master / HEAD

[szechyjs]

I had this problem with rc.0 as well, the solution was to properly use value as an input.

Change:

<md-progress-bar mode="determinate" color="{{getColor(h.pid.percentage)}}" value={{h.pid.percentage}}></md-progress-bar>

To:

<md-progress-bar mode="determinate" color="{{getColor(h.pid.percentage)}}" [value]="h.pid.percentage"></md-progress-bar>

[josephperrott]

As @szechyjs pointed out, because custom web components do not have a built in value property, you will need to use the angular property binding syntax [] to provide the value to the component.

Marking as closed as this is working as intended

[Pixcell]

I am deeply sorry to re-open this issue. But I had already tried this, and it doesn't work.

You'll find below the relevant part of html code, html output, angular component, package.json, etc.

import {MdToolbar} from '@angular2-material/toolbar';
import {MdButton} from '@angular2-material/button';
import {MdCard} from '@angular2-material/card';
import {MdProgressBar} from '@angular2-material/progress-bar';

@Component({
  selector: 'home',
  templateUrl: 'components/home/home.component.html',
  styleUrls: ['components/home/home.component.css'],
  providers: [],
  directives: [MdToolbar, MdButton, MdCard, MdProgressBar]
})
export class HomeComponent implements OnInit{

<p>
     <span>PID completion {{h.pid.percentage}}%</span><span *ngIf="h.pid.warning">{{h.pid.warning}}        </span>
    <md-progress-bar mode="determinate" [value]="h.pid.percentage"></md-progress-bar>
</p>

    "@angular/common": "^2.0.0-rc.1",
    "@angular/compiler": "^2.0.0-rc.1",
    "@angular/core": "^2.0.0-rc.1",
    "@angular/http": "^2.0.0-rc.1",
    "@angular/platform-browser": "^2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
    "@angular/router": "^2.0.0-rc.1",
    "@angular/router-deprecated": "^2.0.0-rc.1",
    "@angular2-material/button": "^2.0.0-alpha.4",
    "@angular2-material/card": "^2.0.0-alpha.4",
    "@angular2-material/checkbox": "^2.0.0-alpha.4",
    "@angular2-material/core": "^2.0.0-alpha.4",
    "@angular2-material/icon": "^2.0.0-alpha.4",
    "@angular2-material/input": "^2.0.0-alpha.4",
    "@angular2-material/progress-bar": "^2.0.0-alpha.4",
    "@angular2-material/progress-circle": "^2.0.0-alpha.4",
    "@angular2-material/radio": "^2.0.0-alpha.4",
    "@angular2-material/sidenav": "^2.0.0-alpha.4",
    "@angular2-material/toolbar": "^2.0.0-alpha.4",

Please tell me if you need anything else.
Working with Chrome Version 50.0.2661.94 (64-bit) on Mac OSX

[msegers]

Hey I'd just want to share my 2 cents.

I was debugging this as well, and put some console.log's in the js files in my node_modules folder.

The logic all still works, it tries to set a correct scaleX value on the element, however I believe the way the bindings are set up [style.transform=somefunc()] <- from top of head don't have it here.

Does not actually work, when I slap the exact string provided as by the function in the element's style within chrome it works like a charm. I just think the bindings like that broke on angular RC1 like more things did for me when binding style. Maybe there is a more explicit version e.g.

[style.tranform.scaleX]="somefunc()"

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}