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: 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

Async elements that act as a form without a submit button

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-appsrcapphomehome.component.html@29:137

Answer

You might want to try with <input/> instead of span, so that it is always editable. For saving on update, you could bring in some function on (focusout) in html.

<input [(ngModel)]="variableForStoringData" (focusout)="saveApiCall()" />

Advertisement

Answer