adding an angular animation to a host element
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.
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';
}
}