I am attempting to implement a navigation system for months and years.
My goal is to disable the left arrow navigation button when the user is in the month of Jan, and the right navigation button when the user is in the month of Dec.
Here is the code snippet:
ngOnInit() {
this.year = new Date().getFullYear();
this.monthIndex = new Date().getMonth();
}
To navigate through months
- If "flag" is 0, it means the user clicked the left arrow key <-
- If "flag" is 1, it means the user clicked the right arrow key ->
Here is the code snippet:
navigationArrowMonth(flag) {
this.monthNavigatorValidation(flag)
}
monthNavigatorValidation(flag?) {
if(flag) {
if(this.monthIndex < 0 || this.monthIndex >= 11) {
this.isRightMonthDisabled = true;
return false;
} else {
this.monthIndex = this.monthIndex + 1;
this.isRightMonthDisabled = false;
return true;
}
} else {
if(this.monthIndex < 0 || this.monthIndex <= 11) {
this.isLeftMonthDisabled = true;
return false;
} else {
this.monthIndex = this.monthIndex - 1;
this.isLeftMonthDisabled = false;
return true;
}
}
}
HTML Template
<!--Month navigation-->
<!--
Clicking should trigger navigationArrowMonth function
-->
<button [disabled]="isLeftMonthDisabled" (click)="navigationArrowMonth(0)" mat-icon-button id="leftMonthKey" aria-label="left naviage">
<mat-icon>keyboard_arrow_left
</mat-icon>
</button>
<div id="monthValue" class="nameArrage" style="width: 120px;">
<!--
Display month using alphabet characters
-->
{{months[monthIndex]}}
</div>
<!--
Clicking should trigger navigationArrowMonth function
Disable when limit reached
-->
<button [disabled]="isRightMonthDisabled" (click)="navigationArrowMonth(1)" mat-icon-button id="rightMonthKey" aria-label="right naviage">
<mat-icon>keyboard_arrow_right
</mat-icon>
</button>
<!--Month navigation end-->
However, my code does not seem to be working as intended.
What mistake am I making here?