Angular 5 Animations: increment and decrement

Nós já podemos testar algumas das funcionalidades que irão vir com a versão v5 do Angular. Para esse artigo nós iremos partir de um projeto com o Angular na versão stable, iremos baixar ele do GitHub e atualizaremos ele para versão (5.0.0-rc.1). No final desse artigo nós teremos a animação abaixo:

Startup

Nosso primeiro passo será baixarmos o projeto. Para isso, escolha um diretório no seu computador e execute o comando abaixo na sua console:

git clone <a href="https://github.com/programadriano/angular-animations.git">https://github.com/programadriano/angular-animations.git</a>

Com o projeto clonado, navegue até ele via CMD e execute o comando npm i, esse comando irá baixar as dependências necessárias para nossa aplicação.
Para o nosso próximo passo precisaremos de uma IDE, para esse artigo iremos utilizar o Visual Studio Code. Abra ele e navegue até o projeto que acabamos de clonar.

Upgrade da versão do Angular

As animações increment e decrement, são algumas das novidades que virão com a nova versão do Angular v5, caso você tente executar os exemplos desse artigo na versão stable, irá receber o erro abaixo na sua console.

Com o nosso projeto aberto no VS Code, vamos atualizar as nossas referências. Para isso, abra o seu arquivo package.json e atualize ele com as as seguintes referências.

{
  "name": "angular-animations",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0-rc.1",
    "@angular/common": "^5.0.0-rc.1",
    "@angular/compiler": "^5.0.0-rc.1",
    "@angular/core": "^5.0.0-rc.1",
    "@angular/forms": "^5.0.0-rc.1",
    "@angular/http": "^5.0.0-rc.1",
    "@angular/platform-browser": "^5.0.0-rc.1",
    "@angular/platform-browser-dynamic": "^5.0.0-rc.1",
    "@angular/router": "^5.0.0-rc.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.0-beta.4",
    "@angular/compiler-cli": "^5.0.0-rc.1",
    "@angular/language-service": "^5.0.0-rc.1",
    "typescript": "~2.4.1",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0"
  }
}

Criando animação

Agora que estamos com o nosso projeto atualizado, vamos criar o código necessário para nossa animação. Para que possamos organizar o nosso código, crie um novo componente com o nome exemplo01. Para isso, execute o comando abaixo para que possamos criar um novo componente:

ng g c components/exemplo01

Agora atualize os arquivos: exemplo-animation.component.ts e exemplo-animation.component.html conforme demonstrado abaixo.

exemplo-animation.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, transition, group, query, style, animate } from "@angular/animations";

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/interval';

@Component({
  selector: 'app-exemplo-animation',
  templateUrl: './exemplo-animation.component.html',
  styleUrls: ['./exemplo-animation.component.css'],
  animations: [
    trigger('valueAnimation', [
      transition(':increment', group([
        query(':enter', [
          style({ color: 'blue', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({ color: 'red', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ]))
    ])
  ]
})

export class ExemploAnimationComponent implements OnInit {

  constructor() { }

  allNumbers: number[] = [1, 2];
  selectedIndex = 0;

  get banners() {
    return [this.allNumbers[this.selectedIndex]];
  }

  ngOnInit() {
    let x = 0;
    Observable.interval(2000)
      .subscribe(() => {
        x % 2 === 0 ? this.selectedIndex++ : this.selectedIndex--;
        x++;
      });
  }

}

exemplo-animation.component.html

 <section [@valueAnimation]="selectedIndex">
  <div class="changingValue" *ngFor="let num of banners"> {{ num }} </div>
</section>

Vamos entender os exemplos a cima, começando pelo nosso ExemploAnimationComponent:

Dentro de animations nós temos:

• valueAnimation: trigger que iremos utilizar nossa animação.
• transtions: increment: com a cor azul e a font-size de 50px e decrement: com a cor vermelha e a font-size de 50px;

Em seguida nós criamos um array com dois valores, para nossa animação, depois nós temos:

• Um método chamado banners retornando um dos valores do nosso array pelo seu index.
• No nosso ngOnInit, nós utilizamos o obervable para que de dois em dois segundos altere o valor da nossa variável selectedIndex.

Por fim, passamos via property bind o valor da nossa trigger para o nosso HTML e executamos o ngFor no retorno do nosso método banners.

Para que possamos testar o nosso código execute o comando ng serve e abra a seguinte URL no seu navegador: http://localhost:4200/.

Esse artigo foi inspirado em um dos artigos escritos pelo Eliran Elnasi.