Get selected item from Angular List - html

Question

I have a list of elements displayed on my HTML page. For whatever element selected, I wish to retrieve the corresponding data from the firebase database.
Here's the code of how I am displaying the list on the HTML page. These items are retrieved from firebase.
<div class="list-group " *ngFor="let year of years | async">
<a routerLink="records" routerLinkActive="active">
<mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>
</div>
routerLink="records" , Records.html is where I would like to display the corresponding data.
Records is a html page where...based on the selected "year" , the data should be dynamically loaded.

Answer 1

I would use two services
one for your http calls (apiService) and one for storing the datas in your app (in that case dataService)
in your actual ts
years:any[] = []
//you can trigger that with ngOnInit or other events
this.apiService.getYears.subscribe(
data => {
this.dataService.setYears(data)
this.years = this.dataService.getYears();
}
)
in your html (no more async just data)
<div class="list-group " *ngFor="let year of years | async">
<a [routerLink]="['records/'+ year.key]" routerLinkActive="active">
<mdb-icon fas icon="table" class="mr-3"></mdb-icon>{{year.key}}</a>
</div>
then in your record component
year:any = undefined
//check for ActivatedRoute.params for retrieving the key (here `yearKey`) in your url
ngOnInit(){
if (!(this.year = this.dataService.getYear(yearKey)))
this.apiService.getYear(yearKey).subscribe(
data => this.year = data
)
}
REFERENCES
Services