How do I store more than the most recent value passed in via Output() and EventEmitter() in Angular?

Question

I am using custom outputs in my Angular app to send user-selected values between components. Right now what's working is that each time a user clicks a check-box item, that value is sent through to my sub-component, where I can see it print to the console. The problem is that when the user clicks another selection, I get that value sent through, but the previous sent value now returns undefined. In other words, I'm only ever getting the most recent value. My question is: how do I store those values being passed down, so that I can built a filter list with each of the user-selected values, rather than just the most recent one?

The values are being passed down to the sub-component with Angular's Output() and EventEmitter(), and sent to a "getFilters($event)" function, like this:

    <div class="page-content">
            <list [records]="records" 
                (sendChange)="getFilters($event)"
                (sendLanguage)="getFilters($event)"
                (sendBranch)="getFilters($event)"
                (sendZipcode)="getFilters($event)">
            </list>
    </div>

I have tried receiving those values, and then storing them in variables. But when I console log those variables, I'm still only ever seeing the most recent selection. How can I store all of the selections to be able to build 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);
}

So, if "zipcode" was the last value passed in, this is what I see in the console - (all other previously sent values are now "undefined"):

Stored: 90001 undefined undefined undefined undefined

score 0 · Accepted Answer · answered Apr 28 '17 at 05:35

<div class="page-content">
            <list [records]="records" 
                (sendChange)="getFilters($event,'page')"
                (sendLanguage)="getFilters($event,'language')"
                (sendBranch)="getFilters($event,'zipcode')"
                (sendZipcode)="getFilters($event,'branch')">
            </list>
    </div>
constructor() {
this.prevValues = [];
}
getFilters(value,type) {
 if(type == 'page')
  this.prevValues.push({'page':value});
if(type == 'language')
  this.prevValues.push({'language':value});
if(type == 'zipcode')
  this.prevValues.push({'zipcode':value});
if(type == 'branch')
  this.prevValues.push({'branch':value});
}

You can get the prev values like this.You will get an array of objects.

How do I store more than the most recent value passed in via Output() and EventEmitter() in Angular?

1 Answers1