Change class properties with Angular2

Question

How to change the background color in .red class dynamically using angular2?

var greenColor = 'green'
$('.red').css('background', greenColor);

Answer 1

I found this answer in a same problem to yours

I hope it is a solution to your problem

Angular2 dynamic change CSS property

thanks

EDITED:

in your angular use the following example:

$scope.headerColor = "#FFFFFF";
$scope.divStyle = {
background-color : $scope.headerColor
}

and

<div class= "headerStyle" ng-class= "{'background-color' : headerColor}">

hope this work !

Answer 2

Try Like this

  this.MsgStyle = this.sanitizer.bypassSecurityTrustStyle("green");

<span [style.background]="MsgStyle">Hello World</span>

Answer 3

To change class property dynamically in angular 2

The Component ::

export class App {  

    alertType: string = "alert alert-";

  constructor(private dataService: DataService) {  }


  doTransaction(userId: string) {
        this.isLoading = true;
        var result;
        var response;
        var statuscode;

        this.dataService.doTransaction(this.userId)
            .subscribe(
            data => {
                console.log("data :: " + data);

            },
            error => {
                console.log(error);                
                this.message = error;  
                this.alertType = this.alertType + "danger" + " alert-dismissible fade show";              

            },
            () => {
                console.log("Response completed");                
                this.message = result.message;
                this.alertType = this.alertType + "success" + " alert-dismissible fade show";       
                this.alert = true;


            }

            );
    }
}

The HTML ::

<div *ngIf="alert" [className]="alertType" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button> {{message}}

NOTE ::

The alertType in the component is the dynamic class name which will be used in the html. And the class name [className] is referring to the CSS class So [className]="alertType" will be interpreted by the browser as

 <div class="alert alert-info alert-dismissible fade show" role="alert">