Edit table at Angular 6

Question

I have had some problems, because I don’t know Angular 6 well. I have this table:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Código</th>
                        <th>Nome</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let operator of dataSource">
                        <td>{{ operator.operatorId }}</td>
                        <td>{{ operator.name }}</td>
                    </tr>
                </tbody>
            </table>     
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <button type="submit" class="btn btn-primary pull-right" >Atualizar</button>
    </div>
    <div class="col-md-6">
            <button type="submit" class="btn btn-primary" >Deletar</button> 
        </div>
</div>

I need to edit it, to be able to give an Update(Put or Patch). How do I? I would like to not use jquery, because I am inside Angular.

Answer 1

Then, you can do the following, as you have ngFor, put a third and fourth column to use the chosen Operator, this way:

<tr *ngFor="let operator of dataSource">
  <td>{{ operator.operatorId }}</td>
  <td>{{ operator.name }}</td>
  <td><button ng-click="atualizar(operator)">Atualizar</button></td>
  <td><button ng-click="deletar(operator)">Deletar</button></td>
</tr>

In the respective column you inform the typescript method that you will call to do your update or delete, in the method you will have your http request calling put or delete. And as the buttons are inside your ng-for, you pass the chosen table Operator.