import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
import { NgxCustomGooglePlacesAutoCompleteComponentModule } from 'ngx-custom-google-places-autocomplete';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    AgmCoreModule.forRoot({
      apiKey: YOUR_API_KEY,
      libraries: ["places", "geometry"]
    }),
    NgxCustomGooglePlacesAutoCompleteComponentModule
  ],
  providers: [
    GoogleMapsAPIWrapper
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

<div style="text-align:center">  
  <ng-template 
    #sampleTemplate
    let-label="label"
    let-img="img"
    let-icon="icon">
      <!-- 
      Note: you'll have to import MatIconModule to your app.module.ts if you want to use this
      import { MatIconModule } from '@angular/material/icon'; and import fonts.googleapis.com to your index.html
      -->
      <mat-icon matListIcon>{{icon}}</mat-icon>
      {{ label }}
      <img [src]='img' class="campground-photo" />
  </ng-template>
 
  <ngx-custom-google-places-autocomplete
    [placeholder]="'Camping near me...'"
    [autoCompleteOpts]="autoCompleteOpts"
    [customResultTemplate]="sampleTemplate"
    [customResults]="customResults"
    (customPlaceSelect)="customPlaceSelect($event)"
    (googlePlaceSelect)="googlePlaceSelect($event)"
    (change)="onChange($event)"
  >
  </ngx-custom-google-places-autocomplete>
</div>

import { IGooglePlace, ISuggestionRow } from 'ngx-custom-google-places-autocomplete';
 
interface myCustomResult extends ISuggestionRow {
  img: string;
  value: string;
  icon: string;
}
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
 
  public customResults: Array<myCustomResult> = [];
 
  public autoCompleteOpts = {
    types: ["geocode"],
    componentRestrictions: { country: "can" }
  };
 
  customPlaceSelect ($event: myCustomResult) {
    console.log($event);
  }
 
  googlePlaceSelect ($event: IGooglePlace) {
    console.log($event);
  }
 
  onChange (searchTerm: string) {
 
    // fetch data from server (service)
    setTimeout(() => {
      this.customResults = [
        {
          label: 'Van Buren State Park',
          img: './assets/photos/photo1.jpg',
          value: 'vanburen',
          icon: 'beach_access'
        },
        {
          label: 'Vanderbilt Mansion National Historic Site',
          img: './assets/photos/photo2.jpg',
          value: 'vanderbilt',
          icon: 'pets'
        },
        {
          label: 'Van Riper Campground',
          img: './assets/photos/photo3.jpg',
          value: 'vanriper',
          icon: 'pool'
        },
      ];
    }, 1000);
  }
}