In my Angular application, I have implemented custom outputs to transmit user-selected values between components. Currently, the functionality allows for the selected value from checkbox items to be sent to a sub-component, where it is displayed in the console. However, the issue arises when a new selection is made, as the previously sent value becomes undefined. Essentially, only the most recent value is being captured. My main concern is how to preserve these values as they are passed down, in order to create a filter list containing all user-selected values, rather than just the latest one.
The values are passed to the sub-component using Angular's Output() and EventEmitter(), and are then processed by a "getFilters($event)" function, as shown below:
<div class="page-content">
<list [records]="records"
(sendChange)="getFilters($event)"
(sendLanguage)="getFilters($event)"
(sendBranch)="getFilters($event)"
(sendZipcode)="getFilters($event)">
</list>
</div>
I have attempted to store these values in variables, yet when I log them in the console, only the most recent selection is displayed. How can I retain all selections to construct a new query?
getFilters(page, language, zipcode, branch) {
const paged = page;
const lang = language;
const zip = zipcode;
const city = branch;
console.log('Stored: ' + paged + ' ' + lang + ' ' + zip + ' ' + city);
}
For example, if "zipcode" is the last value transmitted, the console output appears as follows (with all previously sent values now "undefined"):
Stored: 90001 undefined undefined undefined undefined