How does "Angular 2.0 for TypeScript" (alpha) animation work?

Question

I am very new in the Angular scene. I just started to learn Angular 2.0 for TypeScript and I was wondering, how the animation (like in a simple HTML with jQuery) works in Angular 2.0

In the homepage of the Angular 2.0 (angular.io > Features) you can see, that there is a way to do animation in "Angular 2.0 for TypeScript".

In my research I found something like this: http://www.angular-dev.com/angular-connect-slides/#/26/0/

But I think this is just a normal JavaScript code. And I am not sure if ngAnimate 2.0 is that, what I am looking for.

Unfortunately, I can't find anymore information about that.

What I want to do, is very simple:

When I click just in a simple div container, I want that another div-container appears (which is in the beginning unvisible).

In jQuery, it would be something like this: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle

But what I want, is this animation in TypeScript. Do you have any idea how I reach this goal?

Thanks for your answers in advance!

EDIT I am sorry, I forgot to mention, what exactly I want. I want to use toggle, but something like in Windows 10:

When you press "Windows + A", it will appear a sidebar on the right side. Exactly that is what I want with animation on the website, when you click on a div-container, and not just simple appearing and disappearing.

I think the jQuery code would be something like that (only for appearing with a time delay)

$("divA").click(function() {
    $("divB").toggle(1000);
});

Answer 1

You can use CSS, or AnimationBuilder

For the CSS way you can check this example from their repo that does exactly what you are looking for.

With AnimationBuilder you can simulate the same behavior like this

First you set up the template that'll hold the button and div to toggle

@Component({
  // Setting up some styles
  template: `
    <div animate-box #box="ab"  style="height:0; width:50%; overflow: hidden;">Some content</div>
    <button (click)="box.toggle(visible = !visible)">Animate</button>
  `,
  directives : [AnimateBox] // See class below
})

Then you create the directive that will handle the animation

@Directive({
  selector : '[animate-box]',
  exportAs : 'ab' // Necessary, we export it and we can get its 'toggle' method in the template
})
class AnimateBox {
  constructor(private _ab: AnimationBuilder, private _e: ElementRef) {}

  toggle(isVisible: boolean = false) {
    let animation = this._ab.css();
    animation
      .setDuration(1000); // Duration in ms

    // If is not visible, we make it slide down
    if(!isVisible) {

      animation
        // Set initial styles
        .setFromStyles({height: '0', width: '50%', overflow: 'hidden'})
        // Set styles that will be added when the animation ends
        .setToStyles({height: '300px'})
    } 
    // If is visible we make it slide up
    else {
      animation
        .setFromStyles({height: '300px', width: '50%'})
        .setToStyles({height: '0'})
    }

    // We start the animation in the element, in this case the div
    animation.start(this._e.nativeElement);
  }
}

Reference

• Animation API, it's super simple, really, really simple.

Notes

This is a temporary API, the new one called ngAnimate 2.0 is not yet available. But you can check what's new in @matsko's talk at AngularConnect - ngAnimate 2.0.

Here's a plnkr with a repro.

I hope it helps.

Answer 2

For your simple "animation" you only need ng-if:

<div (click)="showDiv2 = !showDiv2">toggle</div>
<div *ng-if="showDiv2">div 2</div>

BTW, Angular 2 animation is not available yet. The animations documentation has landed.