When i bind to a array, it doesnt seem to properly reflect to the markup ngif

I have an @Input which I assign a value in the parent component. I assign the value from an empty array to a array of size one.

In this component though, it doesnt seem to properly reflect this changed array in the form of an NGIF. It is pretty simple, and I didnt think I needed to use setters as it is taking the object as is etc.

Below is the explicit code I am using for the implementation

Parent Item A Markup

<input-datalist [buttons]="buttons"></input-datalist>

Parent Item A Code:

buttons: any[];
ngOnInit() { this.buttons = [ {key: "value"} ];

Component input-datalist Markup:

<jqxGrid (contextMenu)="handleContext($event)"></jqxGrid>
<jqxMenu *ngIf="buttons && buttons.length > 0">
  <ul>
    <li *ngFor="let btn of buttons">{{btn.key}}</li>
  </ul>
</jqxMenu>

Component input-datalist Code:

@Input() buttons: any[]

@ViewChild('gridMenu', { read: null, static: true }) gridMenu: jqxMenuComponent;
handleContext(event){
    let scrollTop = window.scrollY;
    let scrollLeft = window.scrollX;
    console.log("Does GridMenu Exist? ", this.gridMenu, 'Button Count: ', this.buttons)
    this.gridMenu.open(parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);
    event.preventDefaults()
}

When I do this, right clicking will call the context menu, but it will say: open does not exist for gridMenu. I took off the ngIf, to see if the issue is with the MENU itself, but it seems that when I set the buttons properly, it still thinks it is empty, even though when I bring it with the console, it shows an array of size one.

Is there something I am missing when it comes to setting the property? It follows every other implementation I have seen.

Solution

i think the problem has nothing to do with inputs. it causes from this line

@ViewChild('gridMenu', { read: null, static: true }) gridMenu: jqxMenuComponent;

here static: true causes ViewChild query not to wait for *ngIf evaluated. in other words static: true causes ViewChild to execute before *ngIf is evaluated ( details here more details here ). So changing as follows should fix your problem.

@ViewChild('gridMenu', { static: false }) gridMenu: jqxMenuComponent;