adding an angular animation to a host element

Question

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 1

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.

Answer 2

I'm writing this answer because I struggled a little bit with the syntax and I like examples for dummies, but Günter's answer is correct.

What I had to do:

    @Component({         selector: 'app-sidenav',         templateUrl: './sidenav.component.html',         styleUrls: ['./sidenav.component.scss'],         animations: [             trigger('toggleDrawer', [                 state('closed', style({                     transform: 'translateX(0)',                     'box-shadow': '0px 3px 6px 1px rgba(0, 0, 0, 0.6)'                 })),                 state('opened', style({                     transform: 'translateX(80vw)'                 })),                 transition('closed <=> opened', animate(300))             ])         ]     })     export class SidenavComponent implements OnInit {          private state: 'opened' | 'closed' = 'closed';          // binds the animation to the host component         @HostBinding('@toggleDrawer') get getToggleDrawer(): string {             return this.state === 'closed' ? 'opened' : 'closed';         }          constructor() { }          ngOnInit(): void {         }          // toggle drawer         toggle(): void {             this.state = this.state === 'closed' ? 'opened' : 'closed';         }          // opens drawer         open(): void {             this.state = 'opened';         }          // closes drawer         close(): void {             this.state = 'closed';         }      }