Animations in Angular.io are a nice feature. But their error messages can be quite misleading.
When you forgot to define the animations array in the @Component annotation, then Angular will report following error message:
“Found the synthetic property @detailExpand. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application
That is clearly misleading, because the error occurs even then the BrowserAnimationsModule is actually included. What it should say instead is something like this: “You are trying to use @detailExpand, but there is no animation property on the component.” Also this error is not mentioned in the official guide.
So, next time you see this error, check the animations annotation. See the example below.
import { animate, state, style, transition, trigger } from '@angular/animations';
import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: './my.component.html',
styleUrls: ['./my.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
// see @detailExpand in the .html template
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class OrbpTableComponent implements OnInit, OnChanges {
...
}
<div class="my-component">
<div class="example-element-detail" [@detailExpand]="row.id == expandedOrbpRowId ? 'expanded' : 'collapsed'">
Animated content goes here
</div>
</div>
Happy coding!
