CODEWITHSUNDEEP
cssangular
Rolando
Rolando

Reputation: 62674

How to animate the change of a variable in angular8 that is not a list?

I have the following variable:

"test", which by default is "Some Text"

In my template I use it by: {{test}}

How do I make it such that whenever the user clicks a button that changes the "test" variable's contents (e.g. "Another Different Text"), that a fade out and fade in animation occurs on the text itself, or the parent div? Most examples I see involves lists... is there a way to do this without one?

Upvotes: 1

Views: 1849

Answers (1)

Shravan
Shravan

Reputation: 1202

There are multiple ways for animating the text when it changes. But I prefer using Angular animations as it provides some nifty helper functions and animation event callbacks.

Below code snippets animate the change of text using Angular animations. Comments are added in the code snippet to explain what's going on.

Html template file:

<h1>Angular Animations Example</h1>
<div>
    <label>Name is: </label>
    <span class="text"
      [@animateText]="currentState"
      (@animateText.done)="animationFinished($event)"
    >
      {{ text }}
    </span>
</div>
<br/>
<button (click)="changeText()">Change Text</button>

Component file:

import { Component } from '@angular/core';
import {
  trigger,
  state,
  style,
  transition,
  animate,
  AnimationEvent
} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    // Define the custom animation trigger
    trigger('animateText', [
      // Defining the hidden state
      state('hidden', style({
        opacity: 0
      })),
      // Defining the visible state
      state('visible', style({
        opacity: 1
      })),
      // Defining the animation for state changes
      transition('hidden <=> visible', [
        animate('1s ease')
      ])
    ])
  ]
})
export class AppComponent  {
  text = 'Angular';

  // Start with hidden state and then change it to visible state 
  // to animate the text when the component is rendered
  currentState = 'hidden';

  changeText() {
    // Do not change the text
    // instead change the state to hidden first for fade away animation

    this.currentState = 'hidden';
  }

  // This method is called when the animation has finished playing
  animationFinished(event: AnimationEvent) {
    if (event.fromState === 'void' && event.toState === 'hidden') {
      /** 
       * This block executes when the component is rendered initially.
       * Change the state to visible once the component has been initialized
       * to play the animation
       */

      this.currentState = 'visible';
    } else if (event.fromState === 'visible' && event.toState === 'hidden') {
      /**
       * Once the previous text fades, perform the text change logic
       * and then change state to visible to play the animation
       */

      this.text = this.text === 'Angular' ? 'Stackblitz' : 'Angular';
      this.currentState = 'visible';
    }
  }
}

Don't forget to include BrowserAnimationsModule in AppModule file.

app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

import { AppComponent } from "./app.component";

@NgModule({
  imports: [BrowserModule, BrowserAnimationsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

You can find the example I created on Stackblitz here. More on Angular animations can be found here.

Upvotes: 1

Related Questions