Now that we have dissected our trigger statement completely, we have one last thing to do, and that is to connect the trigger to a property it needs to look at. So, let's add a little more code to the template:

@Component({
  selector: 'example',
  template: `
  <button (click)="makeBigger()">Make bigger</button>
  <button (click)="makeSmaller()">Make smaller</button>
  <p class="animate" [@sizeAnimation]="state">some text</p>
  `
  ,
  animations: [
    trigger('sizeAnimation', [
      state('small', style({
        transform:'scale(1)',
        backgroundColor: 'green'})),
      state('large', style({
        transform: 'scale(1.4)',
        backgroundColor : 'red'
      })),
      transition('small => large', animate('100ms ease-in')),
      transition('large => small',animate('100ms ease-out'))
    ])
  ],
  styles: [`
    .animate {
      background: green;
      width: 100px;
    }
  `]
})
export class ExampleComponent {
  state: string;
  
  makeBigger() {
    this.state = 'large';
  }

  makeSmaller() {
    this.state = 'small';
  }
}

Now, they key thing to look at is the [@animationName]='state'; this is where we say that the trigger should look at the component state property and we already know what values state should have for an animation to be triggered.