Angular2 animate event emitter removal of child component

Question

I have a child component that is removed with an event emitter and i want to add an animation on it's removal. My thinking was to animate from a wildcard state to void:

@Component({
  selector: 'content-attendee',
  styleUrls: ['content-attendee.component.scss'],
  template: `
    <div class="px1 item">
      testing 123
         <a class="btn-remove ion-close-circled md fnt--mid-gray" (click)="handleRemoval()"></a>
      </div>
    </div>
  `,
    animations: [
      trigger('item', [
        transition('* => void', [
          animate(100, style({ transform: 'scale3d(0, 0, 0)' }))
        ])
      ])
    ]

})

export class ContentAttendeeComponent { 
  @Input() contentAttendee: AttendeeModel;

  @Output()
  delete: EventEmitter<AttendeeModel> = new EventEmitter<AttendeeModel>();

  handleRemoval(contentAttendee: AttendeeModel) {
      this.delete.emit(this.contentAttendee);
  }
}

However the removal animation is not running, any help really appreciated.

Answer 1

You can also use :leave in place of * => void for the the leave alias. Also try to add :enter transition and may to other states. although specifying [@item] in template should work.

Trigger

 animations: [
      trigger('item', [
        transition(':leave', [
          animate(100, style({ transform: 'scale3d(0, 0, 0)' }))
        ])
      ])
    ]

Template

<div class="px1 item" [@item]="animationtrigger"> // remove "animationtrigger" just use [@item]
  testing 123
     <a class="btn-remove ion-close-circled md fnt--mid-gray" (click)="handleRemoval()"></a>
  </div>
</div>

Class

export class ContentAttendeeComponent { 

      @Input() contentAttendee: AttendeeModel;
      animationtrigger:bool; // just to make sure a transition is firing

      @Output()
      delete: EventEmitter<AttendeeModel> = new EventEmitter<AttendeeModel>();

      handleRemoval(contentAttendee: AttendeeModel) {
          this.delete.emit(this.contentAttendee);
          this.animationtrigger=true; // remove this line eventually
      }
    }