angular - Hoe een argument van de UI naar graphql doorgeven om gegevens op te halen

Ik heb een GraphQL-url waarmee ik gegevens van de backend kan ophalen. Het probleem is echter dat ik momenteel de hardcoded id van een klant gebruik om gegevens op te halen. Ik wil een invoerveld maken en de gebruiker vervolgens in staat stellen om elk klantrecord op te halen door de klant-id in te voeren. Huidige hardcoded code om een klantrecord op te halen:

ngOnInit() {
this.apollo
.watchQuery({
  query: gql`
    {
      findCustomer(id: "UF2aLa1L687") {
        id
        customerType
      }
    }
  `,
})
.valueChanges.subscribe(result => {
  this.customer = result.data ;
  this.loading = result.loading;
  this.error = result.errors;
  console.log('Customer Info', this.customer);
  console.log('Loading', this.loading);
  console.log('Error', this.error);

});

}

Hoe geef ik waarde door vanuit de UI, ik heb iets nodig dat lijkt op Angular two-way binding met ngModel. Ik heb deze code geprobeerd maar ik krijg een Unterminated String-fout.

  searchByCustomerIdGraphQL() {
console.log(this.customerIdValue);
this.isLoadingResults = true;
this.apollo.watchQuery({
  query: gql`
  {
    findCustomer(id : "` + this.customerIdValue + `") {
      id
    }
  }
  }`
}).valueChanges.subscribe( result => {
  this.customerSearchRecord = result.data;
  this.loading = result.loading;
  this.error = result.errors;
});
}

Kan iemand me helpen uit te zoeken hoe ik waarden kan doorgeven?