As a newcomer to Angular, I am exploring new concepts for the first time. I have a custom component called Timeselector with an Apply button whose enable/disable state is determined by validations performed in another custom component called Monthpicker. Currently, I am implementing this functionality in the following way:
timeselector.component.html
<button class="btn btn-primary" (click)="apply()" [disabled]="!isValid">
timeselector.component.ts
isValid: boolean= true;
...
@ViewChild(MonthpickerComponent) monthpicker: MonthpickerComponent;
...
ngOnInit(): void {
this.isValid=this.monthpicker.isValidRange;
}
The above logic only executes on ngOnInit, and there are no other methods being called from the monthpicker. How can I address this issue?
Here's my monthpicker.component.ts
isValidRange: boolean= true;
...
validate(sDate: string, eDate: string) {
this.isValidRange=true;
...
if (...) {
this.isValidRange=false;
}
if (...) {
this.isValidRange=false;
}
if (//all good) {
this.isValidRange=true;
}
}
The value of isValidRange is determined based on certain conditions. Is there a way to directly bind the apply button to isValidRange? Can it be done like this:
<button class="btn btn-primary" (click)="apply()" [disabled]="monthpicker.!isValidRange">
If more information is needed, please let me know, and I will provide a stackblitz example promptly.