Angular simple ngIf inverted?

Question

Homemade NavBar. environment contains lists with the dropdown elements defined like this:

      {
      title: 'Overview', isDropped: false, Links: [
        {linkTitle: 'What is Hunter', linkRoute: '/whatishunter'},
        {linkTitle: 'What is a Hard Problem', linkRoute: '/hardproblem'},
        {linkTitle: 'Real World Applications', linkRoute: '/realapps'},
        {linkTitle: 'Using Hunter', linkRoute: '/usingHunter'}
        ]
      },

The navbar html loops (ngFor) for each dropdown in that section of the navbar; added leftdropdown is dropped to show what's happening:

<div class="positionLeft" [ngStyle]="{'z-index': '2', 'height': '50px'}">
<div *ngFor="let leftdropdown of barContents.leftMenus">
  <app-navdropdown [title]="[leftdropdown.title]" [isDropped]="[leftdropdown.isDropped]"
                   [links]="[leftdropdown.links]"></app-navdropdown>
          added leftdropdown isdropped = {{leftdropdown.isDropped}}
</div>

The "leftdropdown" elements are from the environment list above. The component.ts is:

And it's trivial HTML is (with extra diagnostic text):

So when the application runs we see the output html as:

Note the debug console here:

And just to be sure, I can manually change isDropped to true and the "if block" is displayed. The obvious error is that *ngIf is inverting the isDropped expression ????

Any clues as to what must be a misunderstanding or simple syntax error?
Thanks for your time and advice. Chuck (Yogi)

`[isDropped]="[leftdropdown.isDropped]"` what is the purpose of square brackets on right hand side? — dee zg, Jun 29 '19 at 16:16
use ngOnchanges to check the value that is comming from the input decorator — Abel Valdez, Jun 29 '19 at 16:39
dee zg -- that seems to be the answer. I have never understood when square brackets are needed on right or not. I thought it would be treated as a string "leftdropdown.isDropped" without the brackets. I thought the square brackets forced the expression evaluation. ... dee zg if you would like to make that the answer and maybe help me understand when the brackets are needed or not, I would be glad to mark it as the correct answer. Thanks. — Yogi Bear, Jun 29 '19 at 17:39
The brackets in `[isDropped]` tell Angular to evaluation the bound expression on the right, as explained in [the documentation](https://angular.io/guide/template-syntax#property-binding-property). — ConnorsFan, Jun 29 '19 at 20:11

score 0 · Answer 1 · answered Jun 30 '19 at 01:39

Thanks for the various comments; I finally realized that MY confusion about square brackets was regarding the left or right of the expression. Using (or not using) square brackets on the left changes how the right side is evaluated. (I thought they needed to be applied to the right side - WRONG.) After carefully (and repeatedly) reviewing the property binding documentation in angular.io, the above became clear to me.
Thanks to everyone who added notes.

Angular simple ngIf inverted?

1 Answers1