*ngStyle makes visualization disappear

Question

I am trying to display a list of items in an Angular web app. I am having a list component which contains the related *ngFor directive to display each list-item component. Inside the HTML of the list-item component I defined the following structure:

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div class="item">
  <div class="content font-weight-bold" style="width: 250px; height: 180px" *ngStyle="{'opacity': 
   (object.booleanValue) ? 1.0 : 0.5}">
    <div class="someActualContent">
      <div>{{object.text}}</div>
      ....
    </div>
  </div>
</div>

Displaying of the objects works fine (all information are correctly shown) until I add the *ngStyle-directive. Then, no element is visible anymore. However, in inspect mode I can see that all list-items are actually there - they are invisible and smaller than I defined them in the div at style="...". Compiling is successful.

I tried object.booleanValue==true but this didin't lead to any changes.

Does someone have an explanation? Thank you in advance!

Answer 1

Enclose the ngStyle directive in square brackets instead of micro-syntax notation *ngStyle. Try the following

<div 
  class="content font-weight-bold" 
  style="width: 250px; height: 180px" 
  [ngStyle]="{'opacity': (object.booleanValue) ? 1.0 : 0.5}"
>
  ...
</div>