Styling Elements Dynamically with ngStyle on Angular

app.component.html

<div [ngStyle]="{backgroundColor:'Red'}">Hello World</div>
<div [ngStyle]="{backgroundColor:backgroundColor}">Hello World 2</div>
<div [ngStyle]="{backgroundColor:getBackgroundColor()}">Hello World 3</div>

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  backgroundColor = 'Blue';

  getBackgroundColor() {
    return 'Green';
  }
}

References
https://github.com/mhdr/AngularSamples/tree/master/010/my-app

Related