Angular Button click rotate icon

Question

I have the following button

  <button class="btn btn-primary btn-sm" type="button" (click)="executeUsecase(usecase.UsecaseId)"><i class="fa fa-play "></i></button>

it shows a play icon.

I want this play icon to spin when I click on this. How can i achieve it?

I am using typescript in angular 4

You have to use css with [ngClass] – Aarsh Jun 22 '18 at 08:12 — Aarsh, Jun 22 '18 at 08:12

score 9 · Answer 1 · answered Jun 22 '18 at 08:15

9

You can use CSS only for that, no Angular required :

button:focus i {
  animation: rotate 1s ease-in-out 0s;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>

answered Jun 22 '18 at 08:15

You can focus a button without click on him. – Alexandre Annic Jun 22 '18 at 08:18
button is not rotating...:( – SmartestVEGA Jun 22 '18 at 08:33
Then you have an issue with your computer. Please make a [mcve] on stackblitz, I'll fork it and make it work for you. – Jun 22 '18 at 08:33
That's a blank plunkr ... Create a [mcve], which means put your code in it, and use stackblitz (you'll see how much easier it is) – Jun 22 '18 at 08:44
can u put ur code there as make it work,,i will take from there – SmartestVEGA Jun 22 '18 at 08:51
My code is already working in the snippet. If you want something applied to your case, make a [mcve]. Otherwise, good luck. – Jun 22 '18 at 08:54
So if it works, that means either your code works, or you didn't use your code. So please, post your code, not mine. – Jun 22 '18 at 09:41

score 4 · Answer 2 · answered Jun 22 '18 at 08:26

4

You can add a flag in your component as follows:

@Component({
  ...
  template: `
    <button class="btn btn-primary btn-sm"
      [ngClass]="{'clicked': isClicked}" type="button"
      (click)="executeUsecase(usecase.UsecaseId)">>
      <i class="fa fa-play"></i>
    </button>
  `
})
export class Component {
  ...
  isClicked: false;

  executeUsecase(id) {
    ...
    this.isClicked = true;
  }
}

css:

.btn {
  transition: all 2s ease-out !important;
}
.clicked {
  transform: rotate(20deg)
}

answered Jun 22 '18 at 08:26

Alexandre Annic

9,942
5
36
50

yes,, i put an alert its popup up in ts executeUsecase() – SmartestVEGA Jun 22 '18 at 08:49
So if the class is correctly added, it means that you don't add the css code. – Alexandre Annic Jun 22 '18 at 08:52

Angular Button click rotate icon

2 Answers2

Linked