I am in the process of developing a performance comparison widget using Angular. The purpose of this widget is to compare the performance of the current Calendar year with the Previous Calendar Year, as well as the performance from the current Year-to-date with the Previous Year-to-date. All the necessary mathematical calculations will be taken care of by me. I have also created a stackblitz for demonstration purposes. Allow me to elaborate on the code structure. I have implemented two dropdowns using basic HTML elements select and option. Additionally, there is another component called app-monthpicker, which serves a specific purpose:
https://i.sstatic.net/V8yCf.png
Both dropdown menus are populated with options from the same array defined in typescript:
modes = ['Calendar Year', 'Year to date'];
Furthermore, each option has a predefined time range associated with it:
- For the Calendar year mode, the range spans from '01-01-2020' to '12-31-2020';
- For the Year-to-date mode, the range extends from '01-01-2020' to '02-07-2020';
The ranges mentioned above are hardcoded within the app-monthpicker component.
Both dropdowns are linked to the same variable. Below is the relevant code snippet:
<div class="inner-panel">
<h3>Time selection widget</h3>
Primary:<br>
<select [(ngModel)]="primaryMode" (change)="modeChangeHandler($event)">
<option *ngFor="let mode of modes" [ngValue]="mode">{{mode}}</option>
</select>
<br><br>
<app-monthpicker></app-monthpicker>
<br><br>
Secondary:<br>
<select [(ngModel)]="secondaryMode" (change)="modeChangeHandler($event)">
<option *ngFor="let mode of modes" [ngValue]="mode">Previous {{mode}}</option>
</select>
<br><br>
<app-monthpicker></app-monthpicker>
</div>
Below is the implementation of the method modeChangeHandler:
@ViewChild(MonthpickerComponent, {static: false}) monthpicker: MonthpickerComponent;
constructor() {}
ngOnInit(): void {
}
modeChangeHandler() {
if (this.primaryMode === this.modes[0] || this.secondaryMode === this.modes[0]) {
this.initCalendarYear();
} else if (this.primaryMode === this.modes[1] || this.secondaryMode === this.modes[1]) {
this.initYearToDate();
} else {
console.log("Default case");
}
}
initCalendarYear() {
this.monthpicker.startRange = '01-01-2020';
this.monthpicker.endRange = '12-31-2020';
}
initYearToDate() {
this.monthpicker.startRange = '01-01-2020';
this.monthpicker.endRange = '02-07-2020';
}
My concern lies with the fact that the values in my secondary dropdown menu are not updating despite being bound to the same variables. Instead, the secondary dropdown menu is altering the range of the field above it rather than its intended range.