Okay, so this may seem like a lot to ask. I have been pounding my head against the desk trying to figure this out. Take the below example:

```
<ul>
   <li>Number: <span id="Number">123</span></li>
</ul>

```

I am wanting to create basically an asyncronous link between the span with the id of "Number", and the database. Is it possible to give the user the ability to click the element, then the input can be changed, and then the updated value be sent to the database on either Enter/Return or unfocus? This is just a small personal project, I am wanting to add a little bit of uniqueness to this. So any help would be fantastic!

\*\*UPDATE

So now I have it almost where it needs to be. However the `apiCall()` function will not call using the interpolation method of showing data. Any ideas on how to get around this? Below is the code and the error:

```
<table class="table table-striped">
            <thead>
              <tr>
                <th scope="col">Expense</th>
                <th scope="col">Amount</th>
              </tr>
            </thead>
            <tbody>
              <ng-container *ngFor="let exp of expenses">
                <tr>
                    <th scope="row"><input type="text" class="formless" name="{{exp.expense}}" placeholder="{{exp.expense}}" (focusout)="apiCall({{exp.id}}, {{exp.expense}})"></th>
                    <td><input type="text" class="formless" placeholder="{{exp.price}}"></td>
                  </tr>
              </ng-container>
            </tbody>
          </table>

```

Error:

```
error NG5002: Parser Error: Unexpected
token {, expected identifier, keyword, or
string at column 10 in [apiCall({{exp.id}},
{{exp.expense}})] in
<path>\budget-app\src\app\home\home.component.html@29:137

```