CODEWITHSUNDEEP
angularangular2-animation
Adrian Bartholomew
Adrian Bartholomew

Reputation: 2632

Angular2 RC4 Animation Trigger Binding Error

I am getting an error when I bind an animation trigger name in the template. [@triggerName] doesn't seem to work. What am I missing?

Component

import {Component, ViewChild, ViewChildren, Input, ElementRef, Renderer} from '@angular/core';
import {trigger, state, style, transition, animate} from '@angular/core';
import 'rxjs/add/operator/map';

@Component({
    selector: 'Header',
    templateUrl: '/components/header/header.html',
    directives: [],

providers: [],
    host: {'(document:click)': 'closeLoginModal($event)'},
    animations: [
        trigger('showLoginTrigger', [
            state('true', style({opacity: '1',})),
            state('false', style({opacity: '0',})),
            transition('0 => 1', animate('400ms ease-in')),
            transition('1 => 0', animate('400ms ease-out'))
        ])
    ]
})
export class Header {
    static get parameters() {
        return [[ElementRef]];
    }
    constructor(ElementRef) {
        this.el = ElementRef.nativeElement;
        this.showLogin = true;
        this.showMenu = false;
        this.test = true;
    }
    closeLoginModal(e) {
        if (this.el.contains(e.target)) return;
        this.showLogin = false;
    }
}

Template Jade

button.no-border((click)='test=!test') LOGIN
    .login-modal(*ngIf='showLogin', [@showLoginTrigger]='test')
        h2
            | Publisher
            br
            | Login

The error I'm getting is:

Can't bind to '@showLoginTrigger' since it isn't a known native property

Upvotes: 0

Views: 761

Answers (1)

micronyks
micronyks

Reputation: 55443

The problem is with syntax [@showLoginTrigger]='test'

RC4 : it should be @showLoginTrigger='test'

RC5 and later : it should be [@showLoginTrigger]='test'

Upvotes: 3

Related Questions