The idea with an animation trigger is that you can show animations when a certain property changes from one state to the next. To define a trigger, we first need to install and import the library we need, specifically, BrowserAnimationsModule, so let's do that.

We install the library by typing the following command:

npm install @angular/animations --save

Let's now import and set up the module with BrowsersAnimationsModule:

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

@NgModule({
  imports: [BrowserAnimationsModule]
})

After this, it's time to import a bunch of constructs that we need to set up the trigger itself:

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

The imported constructs have the following functionality:

• trigger: This defines the property in the component that the animation targets; it needs a name as the first argument and an array of states and transitions as the second argument
• state: This defines the property value and what CSS properties it should have; you need to define one of these for each value that the property can assume
• transition: This defines how the animation should play out when you go from one property value to another
• animate: This carries out the defined animation when we move from one state value to the next