Currently, I am facing a situation where I have a component embedded in my HTML template that needs to remain hidden until a certain condition is met by checking a box. The tricky part is that the condition for setting "showControl" to true relies on calling a method on the control itself, creating somewhat of a chicken and egg scenario.
The HTML setup looks like this:
<input type="checkbox" (click)="clickBox()" />
<div *ngIf="showControl">
<app-sample #appsampleref></app-sample>
</div>
Here is the corresponding TypeScript code snippet:
@ViewChild(appsampleref) appSampleControl: AppSampleComponent;
clickBox() {
if (this.appSampleControl.someMethod()) {
this.showControl = true;
}
}
However, running this code results in the following error message:
ERROR TypeError: Unable to get property 'someMethod' of undefined or null reference
I am seeking advice on how to navigate this issue since Angular seems to be delaying the initialization of my control until it is displayed.
Any insights or pointers would be greatly appreciated! :)