Twitter Bootstrap Question posted in

Angular2 Can't change css style dynamically – Twitter bootstrap

I’m using angular2 to style a few input forms, they become disabled when the user doesn’t have permission to modify them, but When an admin logs, the inputs are enabled.
To make it more obvious this i tried to style them, gray when disabled, white when enabled.

in the html code:

<input type="text" class="form-control" [style.background]="cssColor" name="" [disabled]="!editionEnable" placeholder="value"
                                    [(ngModel)]="class.property" />

i tried with [style.backgroundColor]="cssColor" too and didn’t change the background color.
Also tried [ngStyle]="{'background-color': cssColor}"> and in the code tried to declare cssColor like this:

  • cssColor:string=”#F0F0F0 !important”;
  • cssColor:string=”#F0F0F0″;
  • cssColor:string=”F0F0F0″;

i added the !important because editing with the web developer tools in firefox, the background color doesn’t change if the !important is not there.

note: i’m using twitter bootstrap

Any ideas on what i’m dooing wrong? with angularjs was far more simple to do this.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    turns out that we had in the custom css file this line: .input { background:#0f0f0f !important;} i just deleted the !important and everything worked as expected.


  2. 0

    Please try doing something like this:

    <input type="text" class="form-control" [style.background]="setCssColor()" name="" [disabled]="!editionEnable" placeholder="value"
                                    [(ngModel)]="class.property" />

    and in your component, something like this:

    setCssColor() {
    if(this.editionEnable) {
      return "#F0F0F0 !important";
    } else {
      return "#00ff"; //whatever color
    }
  }

    Hope this helps.

    Login or Signup to reply.
  3. 0

    Try this:

    Inside the component:

    public cssColor:string="#F0F0F0";

    Inside the component.html

    <input type="text" class="form-control"  [ngStyle]="{'background-color':  cssColor}"  placeholder="value" />

    Also It could be worth mentioning, Stop the application, run npm cache clear then re-run the application.

    Either way the example above is working my end.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search