To use Angular animations, it must be installed from NPM.

@angular/animations

It is then imported in the AppModule as

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

The animations can now be called inside any component. It is defined inside the component’s decorator underneath the “animations” property.

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

@Component({
  selector: 'app-root',
  template: `
    <app-org-chart [@myAnimation]="state" (click)="animateMe()"></app-org-chart>
  `,
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('myAnimation', [
        state('small', style({
            fontSize: '1em',
        })),
        state('large', style({
            fontSize: '3em',
        })),
        transition('small <=> large', animate('500ms ease-in'))
    ])
  ]
})
export class AppComponent {
  state = "small";
  animateMe() {
    this.state = (this.state === 'small' ? 'large' : 'small');
  }
}

Note that animations have a trigger followed by different states. There are many different properties of the animation service. Note that these are imported (ES6 import) at the top of the component.

The triggers are called within the element with a property binding “[@myAnimation]”. There is also an event binding to call the animation method which modifies the state.

More information about Angular animations can be found here…