0

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!

Ahmad Shahbaz
  • 222
  • 2
  • 5
  • 20
greenfield
  • 79
  • 1
  • 9

1 Answers1

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>
ruth
  • 29,535
  • 4
  • 30
  • 57
  • I've updated the answer. Please check if it works for you now. – ruth Jul 21 '20 at 12:13
  • Yes it works! Thanks a lot :-) What exactly do the []-brackets change? – greenfield Jul 21 '20 at 12:15
  • 1
    Usually the micro-syntax `*directive` is a placeholder that will expanded to `[directive]`. But not every directives support micro-syntax signature. Directives like `*ngIf` and `*ngFor` support that signature whereas `ngClass` or `ngStyle` don't. – ruth Jul 21 '20 at 12:19