-1

I have here this function in my service.ts

   public getUploadPeriod(){
    let baseYear = 2020;
    let currYear = new Date().getFullYear();
    let years = [];

    for (var i = baseYear; i <= currYear; i++) {
    years.push(i);
    }
    return years
  
  }

And this is the ts of my project I am trying to call out the function that I create in service.ts

  getUploadPeriod() {
   const years = this.uploadFacilityService.getUploadPeriod();
   console.log(years)
   return years
  }

And this is my html

   <mat-select
    placeholder="Select Time Period">
    <mat-option  value="">
        {{ years }}
    </mat-option>
   </mat-select>

The years are already generated with the function that I created but theres no display in my dropdown list. Can someone help me with this. Thank you!

luna
  • 1
  • 2
  • you should use a [ngfor](https://angular.io/api/common/NgForOf) in this case. Please spend some time on the [tour of heroes](https://angular.io/tutorial) tutorial – The Fabio Jun 29 '22 at 03:57
  • you are not looping over the array, check here https://stackoverflow.com/a/56451748/2429434 – Mhd Wael Jazmati Jun 29 '22 at 04:00

2 Answers2

2

As seen in the documentation for the Angular select:

To add options to the select, add <mat-option> elements to the <mat-select>. Each <mat-option> has a value property that can be used to set the value that will be selected if the user chooses this option. The content of the <mat-option> is what will be shown to the user.

Remember that inside a select, the options must be generated iteratively if you want to fetch them from a collection. Thus, in your useCase, it would look like this:

<mat-label>Select time period</mat-label>
<mat-select [(ngModel)]="year" name="year">
  <mat-option *ngFor="let year of years" [value]="year">
    {{year}}
  </mat-option>
</mat-select>

Read more about select and <mat-select>: https://material.angular.io/components/select/overview

Edit: After taking a look at the rest of your code, years should have a higher scope than the one you are giving it. So, initialize the variable in the component constructor and set its value inside of your method (remember to set this.years). This way, the variable will be accessible from the component's template.

Felipe Esteban Hernández
  • 31
  • 4
  • Thank you so much this works on my project. will delete this post on a certain time. Thanks a lot – luna Jun 29 '22 at 04:38
  • Hi! follow up question, How can I arrange the order of the years in the dropdown like it should be 2022-2020. – luna Jun 29 '22 at 04:59
  • The Array.prototype.sort() method is good place to start. https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/sort If you have a more specific situation, maybe Array.protoype.map() is what you need. – Felipe Esteban Hernández Aug 17 '22 at 04:53
1

years variable should be declared outside of method scope so template would have access to it.

years: any;

  getUploadPeriod() {
    this.years = this.serviceGetUploadPeriod();
    console.log(this.years);
  }

Use *ngFor to iterate over items in template.

<div *ngFor="let year of years">
  {{ year }}
</div>

Working example: https://stackblitz.com/edit/angular-ivy-4qd3ao?file=src%2Fapp%2Fapp.component.ts

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • Please do not delete the question just because you got your answer. Someone else might come over this problem too - leave this here for future readers. For sorting, sort the items in the array in TS file beforehand: https://stackoverflow.com/a/1063027/15439733 – Joosep Parts Jun 29 '22 at 05:38