Can't pass input parameter to the function called in DOM-CodePudding

I'm trying to use a createAccount(id: string) function inside my HTML button. I have created a service that does the job of account creation, that service takes in an ID as input. After that, I have injected this service in my .ts file to create a method that will be called whenever the user clicks a button. I'm now struggling with the ID, couldn't find a way to pass it into my HTML.

here is my service code:

public async createAccount(accountID: string): Promise<void> {
 if (this.accountsWithBalance.has(accountID)){
 throw Error("ACCOUNT_EXISTS");
 }
 this.accountsWithBalance.set(accountID, 0);
 }

and this is my .ts code:

constructor(private accService: AccountingService){
 }

 addAccount(id:string){
 return this.accService.createAccount(id);
 }

and this is the HTML button where i'm trying to call this function:

<input placeholder="enter account name" id='createAccountInput'>
<button (click)="addAccount()" id='createAccountButton'>Submit</button>

Thanks in advance!

CodePudding user response：

Bind the input to some kind of a controller

First create a variable in .ts file

 accountId: string;

constructor(private accService: AccountingService){
 }

 addAccount(id:string){
 return this.accService.createAccount(id);
 }

then bind it in HTML

<input
  #accountIdInput 
  placeholder="enter account name" 
  id='createAccountInput'
  [(ngModel)]="accountId">
<button (click)="addAccount(accountId)" id='createAccountButton'>Submit</button>