> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/angular-4/builtin-directives/attribute-directives/ngstyle.md).

# ngStyle

```javascript
import { Component, Input } from '@angular/core`;

@Component({
    selector: 'ngStyle -example', 
    template: `<div>
        <h2>ngStyle Example</h2>
        <!-- 👇 note the use of ngStyle with ng expressions -->
        <div [ngStyle]="{'color': resultColor, 'background-color': resultBG}">
            {{result}}
        </div>
    <div>`,

})
export class NgStyleExample implements OnInit {
    @Input result;
    resultColor: string = 'green';
    resultBG = '#ddd';

    ngOnInit(){
        if (result < 40){
            this.resultColor = 'red';
        }
    }
}
```