Changing 'style' of an element using Angular 2?

[Vern Jensen]

I'm wondering how to set tye 'style' of an element using Angular 2. I get various run-time exceptions when everything I've tried.

In my controller class's onInit() method I set:

this.styleTest = "width: 50%";

I've tried:

1) <table width="350" class="ReportTable" style="{{styleTest}}">

EXCEPTION: TypeError: Cannot set property style of #<Element> which has only a getter in [{{styleTest}} in null]

2) <table width="350" class="ReportTable" [style]="styleTest">

EXCEPTION: TypeError: Cannot set property style of #<Element> which has only a getter in [styleTest in null]

3) <table width="350" class="ReportTable" *ng-style="styleTest">

EXCEPTION: Cannot find a differ supporting object 'width: 50%' in [styleTest in null]

..and various other variations, all resulting in exceptions at run-time. And yes, I'm including NgStyle in my "import" and @View directives list.

Unrelated question: is there any way to contribute to the preliminary documentation on angular.io's website? 

There is such a shortage of information there right now that I could easily flesh things out more with the little that I've already learned on these forums and by various google searches. I'm sure I'm not the only one who would benefit from an "Angular 1 to 2 transition guide". I could certainly write a starting version of this.

-Vern

P.S. if Eric Martinez ends up responding to this... then thank you again for your help. It has been invaluable the past several days. :-)

[Eric Martinez]

Vern,

Sadly I can't answer you why those variations don't work. But you can use

<table width="350" class="ReportTable" [ng-style]="{'font-size': '150%'}"> // for example

That should work. I'm curious about why your proposals didn't work, so I asked in the official chat room for ng2, so you can follow the question over here https://gitter.im/angular/angular?at=55e9172517b2081605a5ab0f (assuming that someone knows and answers).

I made this plnkr : http://plnkr.co/edit/TY8lW7?p=preview so you can test it (it will fail because I left the non-working variation, just remove it from the template)

Regarding your second question, you can contribute in these gits

- https://github.com/angular/angular.io  angular.io website

- https://github.com/angular/angular the framework itself (don't confuse it with /angular.js, that's for ng1)

PS : When I read it I laughed :P. I'm glad I can help you ;)

[Eric Martinez]

I forgot to add this issue https://github.com/angular/angular/issues/3709 , there you can see other ways to add styles.

[Eric Martinez]

Well, if you see the right next answer in the chat you'll see why the variations didn't work. We were passing a string when ng-style expects an object, so if you change your code to this

<table width="350" class="ReportTable" [ng-style]="styleTest">
//...
this.styleTest = {'width': '50%'};

That should do the trick!