Pick button id click on Angular

I have several buttons with the same function and I try to get the last id clicked, but always only a single id comes.

HTML:

<div class="container">
<div class="row">
  <div class="col-sm">
    <button type="button" class="btn btn-primary bot-click" value="E" id="E" #ref (click)="but_no(ref.value)">CASA
      FECHADA</button>
  </div>
  <div class="col-sm">
    <button type="button" class="btn btn-primary bot-click" value="D" id="D" #ref (click)="but_no(ref.value)">ENDEREÇO
      NÃO LOCALIZADO</button>
  </div>
  <div class="col-sm">
    <button type="button" class="btn btn-primary bot-click" value="G" id="G" #ref (click)="but_no(ref.value)">CLIENTE
      REAGENDOU</button>
  </div>
</div>
<br>
<!-- ! -->
<div class="row">
  <div class="col-sm">
    <button type="button" class="btn btn-primary bot-click" value="F" id="F" #ref (click)="but_no(ref.value)">EXCEDEU
      O HORARIO</button>
  </div>
  <div class="col-sm">
    <button type="button" class="btn btn-primary bot-click" value="I" id="I" #ref (click)="but_no(ref.value)">CLIENTE
      REALIZOU</button>
  </div>
  <div class="col-sm">
    <button type="button" class="btn btn-primary bot-click" value="K" id="K" #ref (click)="but_no(ref.value)">ERRO
      DE ENTREGA</button>
  </div>
</div>

TS:

     but_no(value) {    
    this.valor = value  
    console.log(this.valor);      
  }

But no matter what button I click, it always comes the "K"

How do I get the exact button id clicked?