agregar una animación angular a un elemento anfitrión

No dudes en divulgar nuestro sitio y códigos en tus redes, necesitamos de tu ayuda para hacer crecer nuestra comunidad.

Solución:

Los corchetes no son necesarios con @HostBinding()

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

Hay dos decoradores. @HostBinding() y @HostListener() por lo tanto la distinción entre () y [] no es necesario, mientras que es cuando host: [...] se usa

Estoy escribiendo esta respuesta porque luché un poco con la sintaxis y me gustan los ejemplos para tontos, pero la respuesta de Günter es correcta.

Lo que tuve que hacer:

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

    

---

---

Utiliza Nuestro Buscador