Despite console indicating false, NgIf appears to always evaluate as true.
The issue stems from the component's HTML below:
<product-component-tree itemSku="{{item.itemSku}}" selectable="false" classes="col-md-12 col-xs-12"></product-component-tree>
where selectable is set to false...
export class ProductComponentTree {
@Input() classes: string;
@Input() itemSku: string;
@Input() selectable: boolean;
ngOnInit() {
if (this.itemSku)
this.productDetailService.getComponents(this.itemSku, true).subscribe(x => {
this.treeData = x;
});
console.log(this.selectable); //prints false
}
}
The HTML template for the component is as follows:
<div class="{{classes}}" *ngIf="selectable">
something
<p-tree [value]="treeData" layout="horizontal" selectionMode="checkbox" [(selection)]="selectedProducts" (onNodeSelect)="nodeSelect($event)"></p-tree>
</div>
<div class="{{classes}}" *ngIf="!selectable">
else
<p-tree [value]="treeData" layout="horizontal" [contextMenu]="productTreeCm" selectionMode="single" [(selection)]="selectedProduct"></p-tree>
<p-contextMenu #productTreeCm [model]="items"></p-contextMenu>
</div>
This setup consistently displays the div with "something" in it!
Objective: Correct functionality to display the "else" div when selectable is false.