Angular 4 animation to height *

Question

I've been puzzled with something I possibly think is a bug in the animation-module in Angular 4. With the animations in Angular 2.x, I made an animation that animates from height * to a fixed height. This worked perfectly fine in Angular 2. When using Angular 4 on the other hand, the height of the element that has the animation applied to it gets buggy when retriggering the animation before it has completed. The wildcard (*) height is what seems to be causing the issue. Here's a demo snippet that can reproduce the issue. The bug can be triggered if you double-click the element when it is in the *-height state:

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

@Component({
  selector: 'app-root',
  template: `
  <h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue">
    {{title}}
  </h1>`,
  animations:
  [
    trigger('toggleAnimation', [
      state('active', style({
        height: '*',
      })),
      state('inactive', style({
        height: '600px',
      })),
      transition('active <=> inactive', animate('500ms ease-in-out'))
    ])
  ]
})
export class AppComponent {
  title = 'app works!';
  isEnabled = 'inactive';
}

Is there something wrong with how I animate the height using the wildcard value, or is there infact something wrong with the way the wildcard height behaves?

Answer 1

Appears to be a bug: https://github.com/angular/angular/issues/15507

Apparently ! is a 'secret' value in 4.2.0-rc.1 which appears to fix the issue, but this doesn't seem to be something that is officially supported or will be supported in the official release.

https://plnkr.co/edit/pZamSqPX9Vb4J6JL721u?p=preview shows it working in 4.2.0-rc.1 with !, and then just go to config.js and change to 4.0.0 and change ! back to * to see how it's buggy again.