Building the list view - lennartdeknikker/frontend-applications GitHub Wiki
When a location is selected, the statue-list component is loaded. This line makes sure the component will only load when a location is selected.
<app-statue-list *ngIf="selectedLocation">First I created a custom class for statues in the statue.ts file:
export class Statue {
id: any;
title: any;
description: any;
imageLink: any;
extent: any;
creationDate: any;
location: any;
}This class is then imported in the list component with this line:
import { Statue } from '../statue';Since this component needs to obtain data for all statues, it needs to connect to the api again. The url to do that is declared in the url variable.
export class StatueListComponent implements OnInit {
url = `https://api.data.netwerkdigitaalerfgoed.nl/datasets/ivo/NMVW/services/NMVW-29/sparql?....Then it needs to save the selected location that is passed on by the map component in a new variable:
@Input("location") selectedLocation : string;Then it connects to the database and obtains the data for all ancestor statues. This data is saved in the statues and statuesList variable.
statues = [];
statuesList = [];
selectedStatue: Statue;
constructor(private http: HttpClient) {
this.http.get(this.url).subscribe(response=> {
const responseData = response;
let allData = [];
allData.push(responseData);
allData[0].results.bindings.forEach(object => {
this.statues.push(object);
});
console.log(this.statues);
this.showCorrespondingStatues();
})}The previously created class is used for the selectedStatue variable. Using typescript this way, forces the component to pass the statue data in a certain format. When clicking on a certain statue, angular calls the showCorrespondingStatues() function. This is declared in the template:
<li *ngFor="let statue of statuesList" [class.selected-li]="statue === selectedStatue" (click)="onSelect(statue)">
<img src="{{statue.imageLink.value}}" alt="{{statue.title.value}}">
</li>This function passes the selected statue to the detail view, which is then loaded.
ngOnChanges() {
this.showCorrespondingStatues();
}
onSelect(statue: Statue): void {
this.selectedStatue = statue;
}
showCorrespondingStatues() {
let statuesListNew = [];
this.statues.forEach(statue => {
if (statue.placeName.value == this.selectedLocation) {
statuesListNew.push(statue);
}
});
this.statuesList = statuesListNew;
}
}