parties-list.component.html

<div>
  <parties-form [hidden]="!user" style="float: left"></parties-form>
  <input type="text" #searchtext placeholder="Search by Location">
  <button type="button" (click)="search(searchtext.value)">Search</button>

  <h1>Parties:</h1>

  <div>
    <select #sort (change)="changeSortOrder(sort.value)">
      <option value="1" selected>Ascending</option>
      <option value="-1">Descending</option>
    </select>
  </div>

  <ul>
    <li *ngFor="let party of parties | async">
      <a [routerLink]="['/party', party._id]">{{party.name}}</a>
      <p>{{party.description}}</p>
      <p>{{party.location.name}}</p>
      <button [hidden]="!isOwner(party)" (click)="removeParty(party)">X</button>
      <div>
        Who is coming:
        Yes - {{party | rsvp:'yes'}}
        Maybe - {{party | rsvp:'maybe'}}
        No - {{party | rsvp:'no'}}
      </div>
    </li>
  </ul>

  <sebm-google-map
    [latitude]="0"
    [longitude]="0"
    [zoom]="1">
    <div *ngFor="let party of parties | async">
      <sebm-google-map-marker
        *ngIf="party.location.lat"
        [latitude]="party.location.lat"
        [longitude]="party.location.lng">
      </sebm-google-map-marker>
    </div>
  </sebm-google-map>

  <pagination-controls (pageChange)="onPageChanged($event)"></pagination-controls>
</div>