Can you wrap an angular component when it uses ngModel and completeMethod

Question

I am creating an angular component to wrap the p-autoComplete tag from PrimeNG. When displayed I want it to perform the same functionality as shown in http://primefaces.org/primeng/autocomplete. With my current component, I am having an issue with ngModel The property and event halves of the two-way binding 'ngModel' are not bound to the same target. Should ngModel and completeMethod be passed in? How would you use ngModel and completeMethod within the autocomplete.ts to achieve the same functionality of p-autoComplete?

HTML Code using component:

<h2>Original autocomplete</h2>

<div>
    <label htmlFor="country2">Country</label>
    <p-autoComplete id="country2" [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries"
                    (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
    </p-autoComplete>
      <small id="country2-help" class="p-error"></small>
 </div>

<h2>Component</h2>
<app-autocomplete id="country2" [(ngModel)]="selectedCountryAdvanced" [suggestions]="filteredCountries"
                (completeMethod)="filterCountry($event)" field="name" [dropdown]="true">
</app-autocomplete>
            

app-autocomplete.html

<div>
    <p-autoComplete [id]="name" [dropdown]="dropdown" [field]="field" [suggestions]="suggestions"
    [(ngModel)]="ngModel" (completeMethod)="completeMethod">
    </p-autoComplete>
</div>

app-autocomplete.ts

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-autocomplete',
  templateUrl: './autocomplete.component.html',
})
export class AutocompleteComponent implements OnInit {
  @Input() name = '';
  @Input() suggestions;
  @Input() field = '';
  @Input() ngModel;
  @Input() completeMethod = '';
  @Input() dropdown = true;

  constructor() { }
  ngOnInit(): void {
  }
}