How to properly use ngStyle in Angular 8.2.14?

Question

I am learning Angular. I know a little bit of HTML, CSS, and JS. Coming to the point whenever I try to used ngStyle as given below the page goes black and until I remove it the page is inactive. Please Help!

<div class="play-container" [ngStyle]="{
   'background-color': clickCounter > 4 ? 'yellow':'lightgray';
   'border':           clickCounter > 4 ? '4px solid black':'none';}">
   <p>
      <input type="text" [(ngModel)]="name"><br>
      <strong>You said: </strong> {{name}}
   </p>
</div>

Answer 1

<div [ngStyle]="{'color':getColor(date)}">{{ date }}</div>

[ngStyle]="{'cssProperty':getCssProperty(if need to send value)}"

To get the Css property value you can get if from another method or can mention it clearly

Stackblitz Example

For Your example [ngStyle]="{'background-color': clickCounter > 4 ? 'yellow':'lightgray' , 'border': clickCounter > 4 ? '4px solid black':'none'}"