<div *ngFor="let f of features" class="location-card">
  <div class="card-header">
    <h1>{{f.properties.n}} <small>{{f.properties['pl']}}</small> </h1>
    <button class="btn btn-close" (click)="dismissedCard.emit(f)">&times;</button>
  </div>
  <div class="card-content">
    <ul class="card-stats">
      <li *ngFor="let propName of cardPropertyKeys; let i = index;">
        <span class="card-stat-label">{{ cardProperties[propName] }}</span>
        <span class="card-stat-value">{{ f.properties[propName + '-' + abbrYear] >= 0 ? (f.properties[propName + '-' + abbrYear]) : 'Unavailable' }}</span>
      </li>
    </ul>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary" (click)="viewMore.emit(f)">View More</button>
  </div>
</div>
<div *ngIf="allowAddLocation" class="location-card location-add">
  <div class="card-content">
    <p>Add another location</p>
    <app-predictive-search
        class="search"
        [(selected)]="search.query"
        [options]="search.results"
        optionField="properties.label"
        (selectionChange)="locationAdded.emit($event)">
    </app-predictive-search>
  </div>
</div>
<div *ngFor="let f of features" class="location-card">
  <div class="card-header">
    <h1>{{f.properties.n}} <small>{{f.properties['pl']}}</small> </h1>
    <button class="btn btn-close" (click)="dismissedCard.emit(f)">&times;</button>
  </div>
  <div class="card-content">
    <ul class="card-stats">
      <li *ngFor="let propName of cardPropertyKeys; let i = index;">
        <span class="card-stat-label">{{ cardProperties[propName] }}</span>
        <span class="card-stat-value">{{ f.properties[propName + '-' + abbrYear] >= 0 ? (f.properties[propName + '-' + abbrYear]) : 'Unavailable' }}</span>
      </li>
    </ul>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary" (click)="viewMore.emit(f)">View More</button>
  </div>
</div>
<div *ngIf="allowAddLocation" class="location-card location-add">
  <div class="card-content">
    <p>Add another location</p>
    <app-predictive-search
        class="search"
        [(selected)]="search.query"
        [options]="search.results"
        optionField="properties.label"
        (selectionChange)="search.query = null; locationAdded.emit($event);">
    </app-predictive-search>
  </div>
</div>
Clear search on select in cards
Clear search on select in cards
