Users need to be able to select locations on the map. Because at this stadium, it was too hard to do this by clicking on a map, this is achieved by showing a list of different locations a user can click on.

The component gets the list of locations from the main app component, so it doesn't have to run any queries to any servers. It just saves the passed on locations in a variable like this:

export class LocationsMapComponent implements OnInit {

  @Input("locationsList") locations: object;
  @Input("statuesList") statues: object;

Then the list of locations is shown in the component template using some angular directives as shown below:

        <ul>
            <li *ngFor="let location of locations" (click)="onSelect(location)" [class.selected-location-li]="location === selectedLocation">{{location}}</li>
        </ul>

As you see in the code above, angular magic is also used to run the onSelect function on click. This function is declared in the locations-map-component.ts file:

  selectedLocation;

  constructor() { }

  ngOnInit() {
  }

  onSelect(location): void{
    this.selectedLocation = location;
  }

}

Then the selected location variable is passed on to the list view component:

<app-statue-list *ngIf="selectedLocation" [location]="selectedLocation"></app-statue-list>