Transform Your Components with Angular Animations

Share This Post

Are you tired of boring and lifeless web applications? Want to add some flair and excitement to your Angular prjects? Look no further, because Angular animations are here to bring your components to life! 

With Angular animations, you can add all sorts of eye-catching transitions and effects to your components. Whether you want to fade in a new element, slide it into view, or make it grow and shrink, Angular has you covered. And with the power of the “ngIf “and “ngClass“ directives, you can easily control when and how your animations are applied. 

But don’t just take our word for it, let’s dive into a demo application to see how it all works.  

Demo Application

For this demo, we’ll create a simple toggle button that reveals a secret message when clicked. To get started, let’s create a new Angular project and add the necessary dependencies: 

ng new angular-animations-demo 

cd angular-animations-demo 

npm install –save @angular/animations 

Next, we need to enable animations in our application by importing the  BrowserAnimationsModule in our app.module.ts file: 

					import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  

  imports: [BrowserAnimationsModule], 
  providers: [], 
  bootstrap: [AppComponent], 

export class AppModule {} 

With that out of the way, let’s create our toggle button and secret message element in the template. We’ll use the *ngIf directive to conditionally render the secret message based on a boolean value in our component: 

<button class=”toggle-button” (click)=”showMessage = !showMessage”>Toggle Button</button> 

<p *ngIf=”showMessage” class=”secret-message”>This is the animated message!</p> 

We’ll also add some basic styles to make our secret message look a little more exciting: 

					.secret-message { 
  background-color: #66af78; 
  padding: 10px 20px; 
  margin-top: 20px; 
  color: white; 
  max-width: fit-content; 
  border-radius: 10px; 

.toggle-button { 
  display: flex; 
  margin: 70px auto 30px; 
  background: #de6773; 
  color: #fbfbfb; 
  padding: 8px 25px; 
  border-radius: 6px; 
  border: none; 
  transition: all 0.3s; 
  cursor: pointer; 

  &amp;:hover { 
    opacity: 0.8; 
    scale: 1.1; 

At this point, if we run our application, we should see a toggle button and a green box with our message that appears and disappears when the button is clicked. It’s not exactly thrilling, but it’s a start

Creating Animation

Now let’s add some animations to make our secret message reveal a little more exciting. First, we need to define our animation triggers. We can do this by adding an animations array to our component: 

					import { trigger, style, animate, transition } from '@angular/animations'; 
 animations: [ 
    trigger('showHide', [ 
      transition(':enter', [ 
        style({ transform: 'translateY(-50px)', opacity: 0 }), 
        animate(300, style({ transform: 'translateY(0px)', opacity: 1 })), 
      transition(':leave', [ 
        animate(300, style({ transform: 'translateY(-50px)', opacity: 0 })), 

In this case, we’ve defined a single trigger called showHide that applies a simple fade in/fade out animation with translation on y-axis to elements with a :enter or :leave transition. 

Next, we need to bind this trigger to our secret-message element by adding the @ symbol and the trigger name to the element’s *ngIf directive: 

<p *ngIf=”showMessage” @showHide class=”secret-message”>This is the animated message!</p>

With that in place, our secret message should now appear and disappear with given animation when button is clicked.  

Advantages of using Angular animations


Overall, Angular animations provide a powerful and flexible way to add visual appeal and interactivity to your web applications. By using the animation triggers and directives, you can easily control the timing and behavior of your animations, making it easy to create a wide range of effects. With a little creativity and experimentation, you can use Angular animations to add excitement and visual interest to your projects. By following the steps outlined in the demo application, you can easily get started with Angular animations in your own projects and start adding some excitement to your web applications. 

Until next time, keep animating 🙂

More To Explore

React Native vs Flutter, depiction of a boxing match
Software development

React Native vs Flutter: Choosing the right framework

While building mobile applications, development speed and app stability are very important. Two of the most popular frameworks in recent years have been React Native

Do You Want To Skyrocket Your Business?

drop us a line and keep in touch