Angular7 Animations

Angular7 Animations

Animations provide a great deal of interaction between the elements in html. Animation was available with Angular 2, animation from Angular 4 onwards is no longer part of the @angular / core library, but is a separate package to be imported into app.module.ts.

To begin with, we must import the library using the code line below –

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

As shown below − the BrowserAnimationsModule must be added to the import list in app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule , RoutingComponent} from './app-routing.module';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
import { MyserviceService } from './myservice.service';
import { HttpClientModule } from '@angular/common/http';
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective,
      RoutingComponent
   ],
   imports: [
      BrowserModule,
      AppRoutingModule,
      HttpClientModule,
      ScrollDispatchModule,
      DragDropModule,
      ReactiveFormsModule,
      BrowserAnimationsModule
   ],
   providers: [MyserviceService],
   bootstrap: [AppComponent]
})
export class AppModule { }

We have added the html elements to app.component.html, which are to be animated.

<div> 
   <button (click) = "animate()">Click Me</button> 
   <div [@myanimation] = "state" class = "rotate"> 
      <img src = "assets/images/1.png" width = "80" height = "80">
   </div> 
</div>

We've added one button and a div with an icon for the main div. There is a click event where the function animate is called for. And the @myanimation directive is added for the class, and given the value as a state.

Let's see the app.component.ts which describes the animation.

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators} from '@angular/forms';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
   styles:[`
      div {
         margin: 0 auto;
         text-align: center;
         width:200px;
      }
      .rotate {
         width:100px;
         height:100px;
         border:solid 1px red;
      }
   `],
   animations: [
      trigger('myanimation',[
         state('smaller',style({
            transform : 'translateY(100px)'
         })),
         state('larger',style({
            transform : 'translateY(0px)'
         })),
         transition('smaller <=> larger',animate('300ms ease-in'))
      ])
   ]
})
export class AppComponent {
   state: string = "smaller";
   animate() {
      this.state= this.state == 'larger' ? 'smaller' : 'larger';
   }
}

We must import the animation function which is to be used as shown above in the.ts file.

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

Here from @angular / animations we imported trigger, state, style, transition, and animate.

We must now add the property of the animations to the @Component)() decorator.

animations: [ 
   trigger('myanimation',[
      state('smaller',style({ 
         transform : 'translateY(100px)' })), 
      state('larger',style({
         transform : 'translateY(0px)' })), 
         transition('smaller <=> larger',animate('300ms ease-in')) 
   ]) 
]

Trigger defines the start of the animation. The first param to this is the animation name to be assigned to the html tag to which the animation is to be added. The second param is the functions that we imported-state, transition, etc.

The state function includes the steps of the animation, through which the element must transition. We've defined two States right now, smaller and larger. We gave the transform style: translateY(100px) and transform: translateY(100px) for smaller state.

Transition function adds the html element to animation. The first argument takes state of beginning and end, the second argument accepts the role of animate. The animate function lets you specify the transition length, delay, and ease.

Check the.html file now to see how the transformation feature functions –

<div>
   <button (click) = "animate()">Click Me</button>
   <div [@myanimation] = "state" class = "rotate">
      <img src = "assets/images/2.png" width = "80" height = "80">
   </div>
</div>

The @component directive has a style property added which centrally aligns the div. Let us take the example below to understand the same –

styles:[` 
   div{  
      margin: 0 auto; 
      text-align: center; 
      width:200px; 
   } 
   .rotate{ 
      width:100px; 
      height:100px; 
      border:solid 1px red;
   } 
`],

Here a special] ["character is used to add styles, if any, to the html element. For the div we have provided the name of the animation specified in the file app.component.ts.

Clicking on a button calls the animate function, which is described as follows in the app.component.ts file –

export class AppComponent {
   state: string = "smaller"; 
   animate() { 
      this.state = this.state == ‘larger’? 'smaller' : 'larger'; 
   } 
}

The state variable is set and the default value is given as lower. The feature animate changes the click-on state. When the state is larger, it converts to smaller; and if smaller, it converts to larger.