Currently, I am utilizing Angular2 and my goal is to only display a component if a certain property is true.
The issue arises when trying to show the <sci-company-form>
element when the sci
variable is set to true.
When setting public sci: boolean = true
or public sci: boolean = false
, everything works as expected.
Even though this appears to be a simple scenario, I am struggling to find a solution that aligns with what I expect.
This is how it's implemented in the HTML file:
<input type="checkbox" (change)="isSci($event.target.checked)">
<sci-company-form *ngIf="sci"></sci-company-form>
And here is the TypeScript code snippet from the component:
public sci: boolean;
isSci($event: boolean) {
this.sci = $event;
console.log("this.sci : " + this.sci + "$event :" + $event);
}