NG.org snippets - Angular

Angular.css

label {
    vertical-align: center;
    text-align: center;
    color: #3C5AFD;
    font-size: 24;
    margin-bottom: 160;
}

Angular.ts

const messages = ["Hi there", "Wazzup", "Ready to start?", "Show me the code"];

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
    animations: [
        trigger("alienState", [
            state("still, flying", style({})),
            transition("still => flying", [
                animate(3000, keyframes([
                    style({ transform: 'translate(60, 0), rotate(10)', offset: 0.15 }),
                    style({ transform: 'translate(-300, 0), rotate(50)', offset: 0.35 }),
                    style({ transform: 'translate(-300, -60), rotate(-30), scale(-0.7, 0.7)', offset: 0.36 }),
                    style({ transform: 'translate(300, -60), rotate(-30), scale(-0.7, 0.7)', offset: 0.60 }),
                    style({ transform: 'translate(300, 0), rotate(50), scale(1,1)', offset: 0.61 }),
                    style({ transform: 'translate(0, 0), rotate(0)', offset: 1 }),
                ]))
            ])
        ]),
        trigger("msgState", [
            state("hidden", style({ opacity: 0 })),
            state("shown", style({ opacity: 1 })),
            transition("hidden => shown", animate(500)),
            transition("shown => hidden", animate(100)),
        ])
    ]
})
export class AppComponent {
    message = "Tap me";
    isActive = false;

    public onTap() {
        if (!this.isActive) {
            this.isActive = true;
            setTimeout(() => {
                this.message = messages[Math.floor(Math.random() * messages.length)];
                this.isActive = false;
            }, 3200);
        }
    }
}

Angular.xml

<grid-layout>
    <label id="message" [text]="message" 
        @msgState="isActive ? 'hidden' : 'shown'"></label>
    <image src="res://alien" id="alien" (tap)="onTap()" height="80" 
        @alienState="isActive ? 'flying': 'still'"></image>
</grid-layout>