adding an angular animation to a host element

angular animation angular-animations
Oliver Renner picture Oliver Renner · Aug 16, 2016 · Viewed 16.4k times · Source

i added an animation to the host via 

@Component({
   ....,
   animations: [
      trigger('slideIn', [
          ...
      ])
   ],
   host: {
      '[@animation]': 'condition'
   }
}

which worked well, on compilation i was told this is deprecated and i should use @HostBinding ... 

@HostBinding('[@animation]') get slideIn() {
   return condition;
}

which throws me an error 

Can't bind to '[@animation' since it isn't a known property of 'my-component-selector'.

but i cannot add an animation into my module.. what can i do ?

Answer

Günter Zöchbauer picture Günter Zöchbauer · Aug 16, 2016

The square brackets are not necessary with @HostBinding()

@HostBinding('@slideIn') get slideIn() {

There are two decorators @HostBinding() and @HostListener() therefore the distinction between () and [] isn't necessary, while it is when host: [...] is used.

Related questions

How to conditionally add animations in Angular 2

I have a form component that has fields, some fields I want to animate when they appear in the form, but not every field. <div *ngFor="let field of form.Fields"> <div [ngSwitch]="field.Type" [@slideOut]> &…

Read More
Angular Animations: Animate Parent and Child Elements

I created an element (div.parent) with an Angular animation that worked great. When I add a child element to it and try to animate the child at the same time, one of the animations doesn't end up running (it …

Read More
Angular 4 animation to height *

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. …

Read More