Filter array of years based on persons age

Question

in my project I have an array of years which I want to filter based on person's age, Max age is 65 years, so for example if a person is 61 years old in years array will be only 3 and 4. How can i achieve that? here is my stackblitz

.html

      <input
        matInput
        formControlName="birthDate"
        type="text"
        class="form-control age"
        placeholder="ex: 25"
        required/>

 <carousel
    #myCarousel
    height="100%"
    width="120"
    cellsToShow="1"
    overflowCellsLimit="3"
    id="age" >
    <div class="carousel-cell" *ngFor="let year of years">
      {{ year.year }}Years
    </div>
  </carousel>

.ts

  years = [
    {
      year: 3,
      value: 3,
    },
    {
      year: 4,
      value: 4,
    },
  
  ];

  next() {
    this.personAge = (this.formGroup.get('formArray') as FormArray)
      .at(0)
      .get('birthDate').value;
    console.log(this.personAge);
    this.period = this.myCarousel.slideCounter + 3;
    console.log(this.period);
  }

oh sry for bad explaining, i meant if max age is 65 years in project and person is 61 years old, he cant choose 5 years, bcuz 61 + 5 = 66, so he can choose 3years and 4 years. did i explained it good? :D — , Oct 20 '21 at 21:19

Ruina · Accepted Answer · 2021-10-22T07:07:11.727

0

You can use the filter function to filter the data.

Something along the lines of this should work:

const years = [{year: 3, value: 3}, {year: 4, value: 4}, {year: 5, value: 5}, {year: 6, value: 6}, {year: 7, value: 7}];
const age = 60;
const result = years.filter(year => year.value + age <= 65); 
// result: [{year: 3, value: 3}, {year: 4, value: 4}, {year: 5, value: 5}]

If you want to do it directly on the template you could use a pipe to filter it.

UPDATE:

The pipe code you have is almost correct, you missed two things.

Since the pipe has multiple inputs you need to specify the inputs after the first one. How do I call an Angular 2 pipe with multiple arguments?
I used const age in my example since it was just that. You should use this.age as reference to the component variable, not a function variable, so you can send it to the pipe.

Here is how the pipe could be coded:

age-filter.pipe.ts

@Pipe({
  name: 'ageFilter',
})
export class AgeFilterPipe implements PipeTransform {
  transform(
    years: { year: number; value: number }[],
    age: number
  ): { year: number; value: number }[] {
    return years.filter((year) => year.value + age <= 65);
  }
}

component.html

<div class="carousel-cell" *ngFor="let year of years | ageFilter: age">
    {{ year.year }}Years
</div>

Also, for future questions, please remember this: How much research effort is expected of stack overflow. Posting a new question should be your last resort.

edited Oct 22 '21 at 07:07

answered Oct 21 '21 at 15:29

Ruina

401
2
12

Hi thank you for your answer and sorry for my question, i am new to this! Also, i am trying to do impelemnt filtered data in my html with pipes as you said but it doesnt work, what am i doing wrong? i updated my stackblitz – Oct 21 '21 at 20:50
Hi @GalathyniusAelin, do not worry, just take it into account before posting future questions. I edited the answer with how to implement the pipe, you almost got it, you missed two things. Check the answer and let me know if I need to improve it further. – Ruina Oct 22 '21 at 07:09
hey, thank u again. updated stackblitz, i implemented your pipe in my code it works perfect with the div, but in my carousel it doesnt show data, is it because the carousel i am using? – Oct 22 '21 at 08:48
@GalathyniusAelin It seems the carousel is having some issues with the dynamic data changes so the issue lies with the component not the filtering method. I took a look at their [GitHub](https://github.com/ivylaboratory/angular-carousel) and found [this answer](https://github.com/ivylaboratory/angular-carousel/issues/52). It seems that you need to refresh/re-render the component every time the data changes. – Ruina Oct 22 '21 at 09:18
thank you so much again! i will try to do re-renderring! – Oct 22 '21 at 12:24

Filter array of years based on persons age

1 Answers1