Angular 14 – Formulários Digitados e Componentes Independentes

Angular 14 foi lançado no início deste mês com a atualização mais significativa desde Ivy. Ele inclui dois recursos muito esperados, formulários reativos digitados e componentes autônomos, além de várias pequenas melhorias.

Os formulários reativos estritamente tipados são uma solicitação da comunidade de longa data que pode ser datada do lançamento do Angular 2.

Até o Angular 14, o Reactive Forms não incluía definições de tipo em muitas de suas classes, e o TypeScript não detectava bugs como no exemplo a seguir durante a compilação.

const login = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});

console.log(login.value.notanemail);

Com o Angular 14, FormGroup, formControl e classes relacionadas incluem definições de tipo que permitem que o TypeScript detecte muitos erros comuns.

A migração para os novos Formulários Reativos Digitados não é automática. Os controladores de formulário, grupos, etc. existentes serão prefixados com Untyped durante a atualização, que retém a definição de tipo exata das versões anteriores do Angular.

Para aproveitar os novos formulários reativos tipados, os desenvolvedores precisarão remover manualmente o prefixo não digitado e corrigir quaisquer erros que possam surgir.

Os desenvolvedores podem encontrar mais detalhes na documentação de Formulários Reativos Digitados. A segunda grande mudança fornecida com o Angular 14 é o conceito de componentes autônomos.

Módulos Angular têm sido um assunto contestado há muito tempo, com muitos membros da comunidade alegando que isso leva a complicações desnecessárias nos aplicativos Angular.

Com o Angular 14, agora é possível criar componentes autônomos simplesmente passando a propriedade standalone: ​​true no decorador Component.

@Component({
  selector: 'sample-component',
  standalone: true,
  template: ``,
  imports: [ ComponentOne, ComponentTwo, SampleDirective,
             SampleService, CommonModule]
  ],
})
export class SampleComponent {
    ...
}

Como a injeção de dependência Angular ainda é necessária, muitas definições de módulo foram movidas para o decorador de componentes.

Ainda não está claro como a comunidade adotará esse novo recurso, e a equipe do Angular sinalizou o recurso como uma prévia do desenvolvedor e pode alterar a API em versões futuras.

Esta versão também inclui uma nova framework de diagnóstico estendida, que fornece feedback aprimorado sobre erros de modelo e práticas recomendadas.

Atualmente, o framework inclui dois novos avisos, um para a sintaxe inversa de banana em uma caixa ([]) (que é válida, mas raramente pretendida) e união nula desnecessária (??) quando a entrada não é anulável.

Por fim, o Angular 14 usa o TypeScript 4.7 mais recente e tem como alvo o ES2020 por padrão. Para uma lista completa de mudanças, acesse o anúncio oficial de lançamento

Angular é um software de código aberto disponível sob a licença do MIT. Contribuições são bem-vindas através do repositório Angular GitHub.

Fonte:

https://www.infoq.com/news/2022/06/angular-14-typed-forms/

https://github.com/angular/angular

Uma nova fase para o Angular

Com as constantes evoluções do framework, equipe e forte conexão com a comunidade angular, o projeto pretende compartilhar mais sobre o trabalho e futuros projetos considerados. Será adicionada uma página no angular.io com o roadmap, que será mantida em andamento pelo menos trimestralmente.

E o que é o roadmap?

O Angular recebe uma grande variedade de solicitações de recursos, tanto de dentro do Google quanto da comunidade. A lista de projetos contém tarefas de manutenção, refatoração de código, melhorias de desempenho e outras melhorias. Eles reúnem representantes de relações com desenvolvedores, gerenciamento de produtos e engenharia para priorizar a lista. Conforme novos projetos entram na fila, ocorre um posicionamento com base na prioridade relativa de outros projetos. Você pode verificar neste link quais são os projetos que serão lançados em atualizações futuras.

O Roadmap:

Você pode encontrar os projetos do backlog que já estão em andamento e também os que trabalharemos em breve.Os trabalhos serão executados conforme a lista de prioridades. Para maior transparência, foram inclusos trabalhos que afetam o próprio desenvolvimento do angular e projetos que se aplicam apenas ao desenvolvimento interno do Google.

O documento foi dividido em duas seções que representam todos os projetos em andamento em uma seção e, na outra, os projetos futuros. Você pode esperar que o trabalho chegue em versões futuras, dependendo de quando forem concluídos e de seu impacto na API pública do Angular. Como o projeto segue um controle de versão semântico, os novos recursos chegarão em versões menores ou maiores e com alterações que podem ser incompatíveis com versões anteriores na versão principal.

O que é controle de versão semântico?

Com a curva de crescimento de um software, novas dependências, novos pacotes irão ser integrados ao software. Se as especificações das dependências forem rígidas, pode ocorrer o bloqueio de versão. Se forem especificadas vagamente, você terá uma promiscuidade da versão. Como solução, cria-se um conjunto de regras e requisitos que ditam como os números de versões são atribuídos e incrementados. Para mais informações, acesse: https://semver.org/

Gostou desta notícia? Comente abaixo!

Referências:

Angular vs ReactJS: Qual o Framework Front-End mais requisitado de 2020

Olá pessoal, o primeiro semestre de 2020 foi uma época cheia de mudanças. Ainda assim, permanece a eterna batalha entre Angular e React. Antes de iniciar a comparação, esclareceremos alguns pontos sobre ambas as tecnologias:

Angular:

Desenvolvido pelo Google e lançado pela primeira vez em 2010, é um framework de desenvolvimento front-end com uma boa estrutura, um ecossistema próprio, regras rígidas e um estilo de código declarativo. Possui uma profunda curva de aprendizado, bastante difícil, mas depois de possuir todas as possibilidades do Angular, ele auxiliará a criação do seu projeto.

Baseado na arquitetura MVC (Model-View-Controller), fornece aos desenvolvedores as peças fundamentais que são necessárias para projetar aplicativos móveis e da web.

React

React foi criado em 2011 e foi criado pelo Facebook. É uma biblioteca front-end que oferece uma oportunidade de construir uma excelente UI. Fácil de ler, escrever e integrar com outras estruturas JavaScript. Com React, você não utiliza somente a lógica do desenvolvedor, mas também a imaginação. Possuindo um ambiente de desenvolvimento flexível, amplia os horizontes de pensamento do desenvolvedor.

Oportunidades

Angular:

Desenvolvido para facilitar a criação de aplicativos nativos e híbridos ricos em recursos, como um SPA ou MPA.

React:

Tem por objetivo expandir as interfaces de usuário complexas, principalmente em apps web e móveis para Android e iOS.

Template Language

Angular:

Utilizando TypeScript, é adequado para desenvolvimento de apps complicados e você não queira perder seu tempo detectando bugs, pois o TypeScript ajuda a detectá-los mais cedo.

React:

Escrito em JavaScript, pode ser utilizado com diversos tipos de aplicações devido ao suporte e integração em outras linguagens.

Performance

Angular:

Funcionando de maneira mais devagar que o React, mas ainda com velocidade satisfatória, o Angular inclui todas as etapas, desde a criação de um projeto até a otimização de código.

React:

Rápido devido à forma como foi concebido, adiciona eficiência e simplicidade ao desenvolvimento de apps.

E qual escolher para ser um desenvolvedor sob demanda?

Escolha o Angular quando precisar:

  • Desenvolver aplicativos ricos em recursos;
  • Estrutura confiável e estável;
  • Desenvolver um app em tempo real, com base em bate-papo ou mensagens;
  • Aplicativos nativos, híbridos ou web que deveriam ser projetos de investimento substanciais;
  • Código em TypeScript;
  • Programação orientada a objetos.

Escolha o Angular quando precisar:

  • Desenvolver app’s modernos e leves a nível empresarial em um curto espaço de tempo;
  • Estrutura flexível, fornecendo soluções seguras de desenvolvimento de sites;
  • Aplicativos de plataforma cruzada ou SPA;
  • Expander a funcionalidade do aplicativo existente;
  • Forte apoio da comunidade.

Tendências:

De acordo com o NPM Trends, o React é mais popular em 2020:

Tendências NPM

O StackOverflow Trends oferece uma visão diferente da situação. De 2014 a 2019, o React e Angular tiveram quase a mesma popularidade, mas o React se tornou um líder nesta corrida:

Tendências de estouro de pilha

Conclusão:

Levando em consideração as estatísticas, o React é a estrutura mais demandada em 2020. Mesmo assim, escolha o seu framework ou biblioteca de acordo com sua necessidade de trabalho e experiência.

Gostou deste artigo? Comente abaixo!

Referências: https://techstory.in/angular-vs-reactjs/

MERN stack, o que é?

Você já ouviu falar no termo MERN stack?

Por definição, MERN significa:

  • (M) MongoDB;
  • (E) ExpressJs;
  • (R) React;
  • (N) Node.js;

Ou seja, é chamado de MERN stack o profissional que domina todas essas quatro tecnologias. É uma stack que permite a criação de sites/sistemas completos (back-end e front-end) utilizando JavaScript no lado do Cliente e lado do Servidor. Com isso, o desenvolvedor fica apto a criar sites/sistemas completos, sem precisar conhecer outra tecnologia ou utilizar outra habilidade. O MERN stack representa uma aliança das tecnologias mais poderosas do mercado, pois oferece a possibilidade de dominar a parte de algoritmos e lógica utilizada no back-end, juntamente com os componentes de design, UX e animações que o front-end é responsável. Isso traz uma competência para apenas um desenvolvedor, onde, normalmente, seriam exigidos dois.

Atualmente, com a alta utilização do JavaScript, o MERN stack é um dos profissionais mais requisitados no mercado.

E quais são as tecnologias utilizadas?

  • MongoDB: É um banco de dados não-relacional. É utilizado na MERN stack pois os dados são manipulados no formato JSON.
  • Node.js: O Node.js trabalha com JavaScript, ou seja, um desenvolvedor que conheça bem a linguagem JavaScript não terá dificuldades em aprender Node.js.
  • Express.js: Um middleware dedicado ao gerenciamento de apps web complexos, é usado para criação de API REST. A API REST corresponde a um site que recuperará dados por meio de solicitações HTTP.
  • React.js: Responsável pelo front-end, é uma biblioteca JavaScript desenvolvida e utilizada pelo Facebook. Responsável por fazer, de maneira extremamente rápida, animações, uploads e transições.

Assim como a MERN stack, também temos a MEAN stack onde o React não é utilizado, mas sim o Angular, alterando somente a biblioteca/framework utilizado no Front-end. Utilizando o Vue.js, teremos o MEVN stack, ou seja, são muitas as opções para quem quer dominar Front e Back-end utilizando JavaScript!.

Dominando essas tecnologias, você é um desenvolvedor MERN/MEAN/MEVN stack!

Gostou deste artigo? Comente abaixo!

Referências:

 

Novidades ANGULAR 10

Angular lançou a versão beta do Angular 10, ou seja, a atualização está a caminho!

Essa atualização, planejada para o popular framework de desenvolvimento web, possui duas versões betas iniciais baseadas em TypeScript. Espera-se que a atualização para o framework desenvolvida pelo Google se concentre mais no ecossistema do que em suas características.

A atualização provavelmente será menor do que as versões anteriores do Angular. Não há data predeterminada de lançamento, visto que o Angular 9 ficou disponível no dia 6 de fevereiro deste ano e a versão Angular 9.1 ficou disponível no dia 25 de março.

Até agora, os recursos do Angular 10 são:

  • Adição de informações de dependência e seletores de conteúdo aos metadados;

  • Propagação do período de valor correto em um ExpressionBinding de uma expressão de microssintaxe para ParsedProperty, que por sua vez propagaria o período para os ASTs (VE e Ivy);

  • Uma correção para o núcleo. A lógica seria adicionada à migração de classe não decorada para decorar classes derivadas de classes não decoradas que usam recursos do Angular;

  • Urlmatcher sempre pode retornar null;

  • Foi corrigida uma situação em que havia uma chance de o service-worker nunca se registrar quando há uma tarefa de longa duração ou tempo limite recorrente.

Angular 9.1 chegou com suporte ao TypeScript 3.8:

A versão final do Angular 9 foi o último trabalho antes do Angular 10. O Angular 9.1 adicionou novos recursos, incluindo o suporte ao TypeScript 3.8, aprimoramentos de desempenho e uma longa lista de correção de bugs.

Este é o último lançamento secundário planejado para 9.x. À medida que começamos a trabalhar para a versão 10.0, você deve esperar para ver as pré-liberações da versão 10.0 normalmente uma vez por semana, embora elas contenham apenas alterações mínimas no início.”

Você pode encontrar as versões preliminares do Angular 10 no GitHub.

Gostou deste artigo? Comente abaixo e compartilhe com seus amigos!

Referências:

https://github.com/angular/angular/releases?ref=morioh.com

Angular decode payload JWT

Veja nesse artigo como decodificar o seu token JWT e ler o seu payload.

Dando continuidade aos meus artigos sobre Angular e JWT, hoje eu irei demonstrar como decodificar os dados de um token no lado do seu front.

Caso tenha interesse em ler os meus artigos anteriores sobre esse assunto, segue o link de cada um deles abaixo:

O objetivo desse artigo não sera demonstrar como configurar o JWT em um projeto angular, ele será rápido e objetivo demonstrado através de alguns trechos de código.

O primeiro passo será importar o pacote jwt-decode. Para isso, abra um terminal no seu computador, navegue até o seu projeto e execute o comando abaixo:

npm i jwt-decode --save

Agora execute o comando abaixo para criar serviço no seu projeto para ser responsável por decodificar o token:

ng g s shared/authToken

Em seguida atualize ele com o seguinte trecho de código:

import { Injectable } from '@angular/core';
import * as jwt_decode from 'jwt-decode';


@Injectable({
  providedIn: 'root'
})
export class AuthTokenService {
  public getToken(): string {
    return localStorage.getItem('token');
  }

  public decodePayloadJWT(): any {
    try {
      return jwt_decode(this.getToken());
    } catch (Error) {
      return null;
    }
  }
}

Analisando o trecho de código anterior, note que nós temos um método chamado getToken(), responsável por pegar o token do seu localStorage e um outro método chamado decodePayloadJWT() retornando any, esse método irá decodificar o token e retornar os seus dados de payload.

Obs.: Esse método está retornando any porque o payload pode variar de projeto para projeto, caso você já tenha um contrato definido de retorno o ideal será criar um class ou interface com os dados de retorno no lugar de any.

Bem simples né?

Agora você pode injetar o seu código nos seus componentes e receber os dados do seu token 😉

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-decode-payload-jwt

Gostou deste artigo? Comente abaixo!

Novidades Angular 8.3

A alguns dias saiu a release 8.3.12 do Angular. Segundo alguns tweets, o time focou em algumas novidades como: um novo comando no CLI, correção de bugs e ajustes no novo render que deve entrar como default na versão 9, o Ivy.

Caso tenha interesse em saber mais sobre esse compilador, eu recomendo a leitura do seguinte artigo: Angular: Conhecendo Ivy.

Bom, mas quais foram os novidades dessa versão?

Novo layout

Caso você já tenha atualizado o seu CLI e criado um novo projeto , deve ter notado o novo layout dessa versão.

Além do novo layout, note que nessa etapa nos temos algumas sugestões de próximos passos.

Deploy

Nessa versão foi adicionado um novo comando no CLI, o ng deploy. Agora com apenas alguns comandos no terminal, e possível publicar o nosso app no Azure, Firebase, Zeit, Netlify, ou GitHub.

Em um próximo artigo eu irei criar um passo a passo de como publicar o nosso utilizando esse novo comando do CLI.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/novidades-angular-8-3

Gostou deste artigo? Deixe seu comentário abaixo!

Angular 8.3: publicando projeto com o Angular CLI em 5 passos

Veja nesse artigo como publicar o seu projeto no GitHub pages em 5 passos

Dando continuidade ao meu artigo anterior: novidades do Angular 8.3, hoje eu irei demonstrar como publicar um projeto no GitHub pages, utilizando o novo comando que foi adicionado na versão 8.3 do CLI, o ng deploy.

Para os próximos passos será necessário estar com a versão 8.3.12 do Angular CLI no seu computador. Caso essa não seja a sua versão, abra um terminal e execute o comando abaixo:

npm install -g @angular/cli

Com a versão do CLI atualizada, vamos aos 5 passos de criação e deploy do projeto.

1- Passo: Criação de um novo projeto

Abra um terminal no seu computador e execute o seguinte comando para criação de um novo projeto:

ng new (nome do seu projeto)

2- Adicionando pacote ghpages

Com o projeto criado, volte no seu terminal, navegue até ele e execute o comando abaixo:

ng add angular-cli-ghpages

3- Criação de um novo repositório no GitHub

Com o projeto criado e o pacote importado, vamos criar um novo repositório no GitHub. Para isso, siga os passos abaixo:

Acesse o link: https://github.com/, vá até o canto superior e clique no icone do lado do simbolo de notificações:

Em seguida clique em new repository:

Agora volte no seu terminal e execute os comandos abaixo para versionar ele no GitHub:

git add *
git commit -m "first commit"
git remote add origin https://github.com/{seu usuario}/{seu repositorio}.git
git push -u origin master

4- Alterando a base url do projeto

Como o projeto será publicado em um subdiretório, será necessário alterar a base url dele. Para isso, vá até o arquivo index.html do seu projeto e altere ele conforme abaixo:

<base href="/nome do seu repositório no git/">

5-Deploy do projeto

Com todos os passos anteriores OK, execute o comando abaixo no seu terminal para publicar o projeto:

ng deploy

Esse comando irá publicar o seu projeto no GitHub Pages no seguinte link: https://github.com/<username>/<repositoryname>.git

  • username: o seu usuário do GitHub
  • nome do seu repositório

Para verificar se o seu projeto foi publicado com sucesso, acesse a url mencionada acima no seu navegador. No meu exemplo ficou a seguinte url: https://programadriano.github.io/angulardeploy/

Bom, a ideia desse artigo era de ser algo rápido demonstrando uma das novidades do Angular 8.3.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/angular-8-3-publicando-projeto-com-o-angular-cli-em-5-passos

Gostou deste artigo? Comente abaixo!

Azure DevOps + Angular + GitHub Pages

Veja nesse artigo como criar uma pipeline no Azure DevOps para publicar o seu projeto Angular no GitHub Pages

Dando continuidade ao meu artigo anterior: Angular 8.3: publicando projeto com o Angular CLI em 5 passos, hoje eu irei demonstrar como criar uma pipeline no Azure DevOps para automatizar o processo de deploy demonstrado no artigo anterior.

Para os próximos passos sera necessário ter uma conta no Azure DevOps Service. Caso você ainda não tenha se cadastrado la, acesse o seguinte link para acessar o portal e criar uma conta: Azure DevOps.

Com o passo da conta OK, vamos a criação de uma nova pipeline. Para isso, siga os passos abaixo:

1- Clique em pipelines:

2 -Em seguida no canto superior direito, clique no botão New pipeline:

3- Selecione o repositório do seu código.

Para esse artigo, eu irei utilizar um repositório do meu GitHub.

4- Selecione a pipeline do Node.js:

Esse passo deve criar uma pipeline básica para projetos Node.js.

Caso seja necessário adicionar um novo step na sua pipeline, você pode utilizar o assistente no canto direito demonstrado na imagem abaixo:

Agora para ajustar pipeline para publicar o nosso projeto, altere o comando npm run build para npm run deploy.

Obs.: Esse comando e com base no meu arquivo package.json, nele eu adicionei o comando ng deploy da nova versão do Angular 8.3

Clique em Save and Run, de um nome para o seu commit e clique em Save and Run novamente.

Assim que o Job finalizar, acesse a sua página no GitHub pages e verifique as alterações que você subiu nessa nova release do seu projeto.

Link do meu projeto publicado em uma pagina do GitHub: Angular 8.3 DevOps.

Bom, a ideia desse artigo era demonstrar como automatizar o processo de deploy de um projeto angular, utilizando um arquivo .yml no Azure DevOps Service.

Espero que tenham gostado e até um próximo artigo pessoal 😉

Fonte: https://medium.com/xp-inc/azure-devops-angular-github-pages

Gostou desse artigo? Comente abaixo!

Angular 7: novas funcionalidades

Veja nesse artigo como atualizar o seu ambiente de trabalho com a versão 7 do Angular e duas de suas novas funcionalidades

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. Hoje irei apresentar 2 novidades do que vieram nessa nova versão: o Drag and Drop e o Scrolling.

O primeiro passo será atualizar os 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

npm uninstall -g angular-cli
npm cache clean 
npm install -g @angular/cli@latest

Versão 6

ng update @angular/cli @angular/core

Para verificar se ele foi atualizado com sucesso, execute o comandong — versionno 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 e 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, 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 trabalha com os estilos no seu projeto. Eu irei selecionar SCSS:

Adicionando rotas no Angular 7

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 nós começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:

ng add @angular/material

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 desse artigo.

Drag and Drop

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:

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

E o arquivo app.component.scss com o trecho de código abaixo:

.example-box {
    width: 200px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .example-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ccc;
    cursor: move;
    width: 24px;
    height: 24px;
  }

Abaixo você tem uma imagem demonstrando o resultado dessa implementação:

Scrolling

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:

<router-outlet></router-outlet>

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

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class VirtualScrollComponent implements OnInit {

  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  
  constructor() { }

  ngOnInit() {
  }

}

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

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

virtual-scroll.component.scss

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }

Abaixo você tem uma imagem demonstrando o resultado desse passo:

Os exemplos demonstrados nesse artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, eu recomendo a leitura do seguinte link: Angular.io.

Fonte: medium.com/angularbr/angular-7-novas-funcionalidades