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 ?

Günter Zöchbauer · Accepted Answer · 2017-02-25 11:15:14Z

52

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.

edited Feb 25, 2017 at 11:15

answered Aug 16, 2016 at 13:13

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

r-Larch · Accepted Answer · 2020-03-04 06:03:42Z

18

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';
        }

    }

edited Mar 4, 2020 at 6:03

r-Larch

233 bronze badges

answered May 22, 2019 at 6:57

David Prieto

2,2996 gold badges35 silver badges53 bronze badges

3 Comments

Frank N Over a year ago

Anyone knows, how to bind an (@toggleDrawer.done) (callback on animation end) to the host?

tinnick Over a year ago

@FrankNocke Have you tried @HostListener('@toggleDrawer.done', ['$event']) ? Might work.

Maxime Lyakhov Over a year ago

@tinnick wow, it's really working like this! @HostListener('@transformPanel.done', ['$event']) thank you!

Collectives™ on Stack Overflow

adding an angular animation to a host element

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related