After watching this video from Traversy Media on how to animate Font Awesome icons with JavaScript I tried implementing a similar solution for Angular.
I came up with a simple component that takes in a list of font-awesome classes (like fa-battery-0 , fa-battery-1 , etc) and scrolls through them on a pre-defined interval which gives the impression of an animated icon.
We declare the component like any other Angular component:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'animated-icon',
template: `<i class="{{currentIcon}}"></i>`,
})
export class AnimatedIconComponent implements OnInit { // The default icon we select is the first of the array
@Input() icon: number = 0 // The icons property is an array of classes
@Input() icons: string[] = [
'fa fa-battery-0',
'fa fa-battery-1',
'fa fa-battery-2',
'fa fa-battery-3',
'fa fa-battery-4',
] // This getter is used in the template to get the selected icon
get currentIcon() {
return this.icons[this.icon]
} // This is where the animation is started
ngOnInit() {
}
}
Don’t forget to declare the component in the module:
// other imports
import { AnimatedIconComponent } from './animated-icon.component'@NgModule({
// other imports, exports, providers
declarations: [
// other declarations
AnimatedIconComponent,
]
})
And now we can use the component in our app using its selector:
<animated-icon></animated-icon>When you load the component like this you will see nothing showing up. This is because FontAwesome needs to be loaded in the page.
There are several ways to do this, one of the easiest ways is to link to the file on the CDN in your index.html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">You should now see a static battery icon on the page.
If you change the value of @Input() icon = 0 to 1 you see that the icon updates, and this is exactly what we are going to do to get the animation.
// This boolean determines if the icon is animating or not
_animate: boolean = true// This is the getter for the animate property
get animate() {
return this._animate
}// This setter toggles the animation and reset the icon
@Input() set animate(animate) {
this._animate = animate
if (!this._animate) {
this.icon = 0
}
}// Update the icon if animation is enabled
updateIcon() {
if (this.animate) {
// Increase the icon if we are still within the limit of the set
if (this.icon < (this.icons.length - 1)) {
return this.icon++
}
// Set the icon to zero if we reached the limit
return this.icon = 0
}
}
The last step is to use the setInterval method to run updateIcon in order to get an animation.
// The default interval for updates is set to 1 second
@Input() delay: number = 1000// This startAnimation method runs updateIcon on each delay
startAnimation() {
setInterval(() => this.updateIcon(), this.delay)
}
To trigger this animation while the component loads we call into startAnimation in the ngOnInit lifecycle hook:
// This is where the animation is started
ngOnInit() {
this.startAnimation()
}When you now refresh your page you should see the battery icon updating each second.
You can see the demo running here on StackBlitz: https://animated-icons-angular.stackblitz.io/
A more complete example can be found here https://angular-tutorials.github.io/animated-icons/ with the source code here https://github.com/angular-tutorials/animated-icons
In case you have any questions of comments feel free to reach out on Twitter or in the comments!
Credits
Thanks to Traversy Media for the inspiration!
Need help?
Need support for your Angular, Ionic, Firebase, NodeJS or TypeScript project? Looking for long-term mentorship? Feel free to book a 1-on-1 session with me on CodeMentor.
