Angular 7: novas funcionalidades | iMasters
Angular 7: novas funcionalidades
Tem 75 artigos publicados com 116540 visualizações desde 2017
Já faz um bom tempo que eu estou focando os meus estudos no Angular. Tive a oportunidade de participar de projetos com ele nas versões 2, 5 e 6, e hoje irei apresentar duas novidades que vieram nessa nova versão: o Drag and Drop e o Scrolling.
O primeiro passo será atualizar o nosso ambiente. Para isso, siga um dos passos abaixo de acordo com a versão que você tem instalada no seu computador:
Versão < 6
Para verificar se ele foi atualizado com sucesso, execute o comando ng — version no seu terminal. Abaixo você tem uma imagem demonstrando esse passo:
Atualizando o Angular para versão 7
Para ficar um passo a passo legal, vamos criar um novo projeto. Para isso, abra um terminal no seu computador e execute o comando ng new. Note que você irá receber uma mensagem perguntando qual o nome do seu projeto.
Essa é uma das novidades dessa nova versão. Abaixo você tem uma imagem demonstrando esse passo:
Novo projeto Angular versão 7
Informe o nome do seu projeto, e em seguida note que você irá receber uma outra mensagem perguntando se deseja adicionar um arquivo de rotas. Eu irei informar Y para que ele adicione.
Adicionando rotas no Angular 7
O próximo passo será informar como você deseja trabalhar com os estilos no seu projeto. Eu irei selecionar SCSS:
Depois desse passo o seu projeto será criado. Para os próximos passos será necessário um editor de textos. Eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.
Antes de começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:
Esse comando irá solicitar que você selecione um template para o seu projeto. Para esse artigo eu irei selecionar o indigo-pink.
Para as próximas perguntas eu irei informar N (não) para o HammerJS e Y (sim) para browser animations.
Com o projeto aberto no seu editor de textos, vamos conhecer as duas funcionalidades mencionadas no inicio deste artigo.
Nessa versão nós temos um módulo chamado DragDropModule. Para utilizar ele, basta adicionar a chamada abaixo no módulo que deseja utilizá-lo.
import {DragDropModule} from '@angular/cdk/drag-drop';
Em seguida atualize o arquivo app.component.html com o trecho de código abaixo:
E o arquivo app.component.scss com o trecho de código a seguir:
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
.example-box:active {
.example-handle {
Abaixo você tem uma imagem demonstrando o resultado dessa implementação:
Um outro módulo que chegou nessa nova versão foi o ScrollDispatchModule. Ele nos permite trabalhar com virtual scroll.
Para implementá-lo vamos criar um novo componente chamado VirtualScroll. Para isso, execute o comando abaixo no seu terminal:
ng g c virtualScroll
Em seguida atualize o seu arquivo app.component.html com o trecho de código abaixo:
E o novo componente no arquivo de rotas: app-routing.module.ts:
{ path: 'scroll', component: VirtualScrollComponent }
Agora, para implementar o Virtual Scroll, vamos atualizar os arquivos: virtual-scroll.component.ts, virtual-scroll.component.scss e virtual-scroll.component.hml com os trechos de código abaixo:
virtual-scroll.component.ts
selector: 'app-virtual-scroll',
templateUrl: './virtual-scroll.component.html',
styleUrls: ['./virtual-scroll.component.scss'],
export class VirtualScrollComponent implements OnInit {
items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
Analisando esse trecho de código, nós temos:
1: estamos adicionando a chamada do ChangeDetectionStrategy para detectar as alterações no nosso componente.
12: estamos criando um array com 100000 itens para passar para nossa view.
virtual-scroll.component.hml
virtual-scroll.component.scss
Abaixo você tem uma imagem demonstrando o resultado desse passo:
Angular 7 Infinite Scroll
Os exemplos demonstrados neste artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, recomendo a leitura do seguinte link: Angular.io.