0

I am using bootstrap which has a button styling where if I click the button and I lose focus it works fine. I need to be able to call a function and then lose focus on the button on the click. Example:

<button type="button" class="btn btn-primary btn-sm" 
    style ="background-color: black; margin-top: 0px; margin-bottom: 10px; position:relative;" (click)="save()">Save</button>

How can I achieve the save being called back to the TS file which works of course but then make it like I click anything else in the page. When I do change focus it does what I want and the button goes back to normal styling. Is there a way to like blur or set focus to another element etc in just the (click) event or another event I can use to this.blur() etc.?

pppery
  • 3,731
  • 22
  • 33
  • 46
beantownace
  • 117
  • 1
  • 10

1 Answers1

1

You could try to use a template reference variable and call the blur() function on it.

<button #button 
  type="button" 
  class="btn btn-primary btn-sm" 
  style ="background-color: black; margin-top: 0px; margin-bottom: 10px; position:relative;" 
  (click)="button.blur(); save()"
>
  Save
</button>

Here the #button denotes the template reference variable and we're calling the blur() method in the handler section before calling the save() handler.

ruth
  • 29,535
  • 4
  • 30
  • 57