#Angular animations install#
#Angular animations series#

If you were to follow this particular example, you would now have something that looks like this: Summary Modify src/app/home/ to reflect the following:

You could use the component wherever or however you like, but in this instance, we would need to add a little bit of extra styling so that it displays correctly on top of the image: In this example, we are adding the like button to the header image for a card. Modify src/app/home/ to reflect the following: Heart Animation Hello World The content for this card Include the following import in src/app/: import Īnd then we would be able to add it to the template for the home page. We will also need to import the BrowserAnimationsModule in the root module for our application.

#Angular animations install#

Run the following command: npm install angular / animations - save First, we will need to install the package. Set up the Angular Animations APIīefore we can start building our like button, there are a couple of things we need to do to set up Angular animations. If you want a much more detailed guide for learning Ionic, then take a look at Building Mobile Apps with Ionic.

#Angular animations series#

If you're not familiar with Ionic already, I'd recommend reading my Ionic Beginners Guide or watching my beginners series first to get up and running and understand the basic concepts. If you would like to learn more about how the Angular Animations API works, I would recommend reading Using the Web Animations API in Ionic. This article will also be making use of the Angular Animations API, but we will not be covering that in-depth in this article (we will just cover the basic set up steps). You must also already have Ionic set up on your machine, and an Ionic project created. Outlineīefore you go through this tutorial, you should have at least a basic understanding of Ionic concepts. We will be building this like button as our own custom component that makes use of the Angular Animations API. The example we will be building won't provide as much as eye-candy as Twitter's own like animation does (which even includes a little sparkly/confetti animation):īut, we will strike a nice middle ground with something that looks pretty good and is still reasonably easy to implement. It is easy enough to create an 'on/off' or 'liked/unliked' state for a like button that uses these icons – you would just use a different icon depending on whether or not the button had been clicked – but, the result is a little more boring than if we put a little more effort into animating it:Īlthough functionally both of these examples are the same, the first example is a lot 'juicier' and is more satisfying to click.

Since Ionic provides both a 'full' and 'empty' heart icon: In this tutorial, we are going to work on building an animated 'like' button that will look like this when clicked: