Até a data deste artigo o Angular está na versão stable (v4.4.6), mas nós já podemos testar algumas das funcionalidades que irão vir com a versão v5. 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 https://github.com/programadriano/angular-animations.git
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.
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
exemplo-animation.component.html
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.
