DEV Community: Flavio Camello

Criar um filtro utilizando BehaviorSubject

Flavio Camello — Wed, 18 Mar 2020 18:34:49 +0000

A principal função da utilização do BehaviorSubject é permitir uma fonte única de dados. Com uma visão centralizada de dados, o BehaviorSubject auxilia quando diversos componentes possuem a necessidade de utilizar o mesmo dado. Sabendo que um dado pode ser alterado por um componente ou usuário ao selecionar ou inserir algo, todos os componentes terão o dado mais atualizado para consultar.

Utilizaremos a biblioteca RxJS que possui observadores e observáveis. Da biblioteca vamos utilizar o Subscription que funciona de forma muito parecida com o Observable. Com ele nós podemos utilizar o método add, onde adicionamos o objeto que será "observado". Além disso, utilizaremos o BehaviorSubject, que será utilizado para conter o valor centralizado, e por emitir que o objeto sofreu alteração no valor atual.

O que faremos em nosso exemplo?

Vamos supor que existe um sistema e que em seu menu está contido um filtro. Esse filtro, é responsável por filtrar vários componentes da tela. Alguns componentes dessa tela necessitam saber o que está contido no filtro, para atualizar os seus dados.

Agora, mãos a massa!

Primeiro, vamos criar um objeto para ser o filtro. Para simplificar o nosso exemplo, o nosso filtro é apenas um filtro de perfil.

Agora criaremos a classe mais importante do nosso exemplo, o FiltroService. O Service será criado para que o sistema fique desacoplado, permitindo que outras páginas possam utilizar o mesmo filtro. Em nosso service, ficará o nosso filtro único, utilizando o BehaviorSubject. Então, toda vez que o filtro for alterado, o método updateFiltro será chamado recebendo o novo filtro. O filtro centralizado irá receber o novo filtro, e enviar a todos os componentes que assinam o BehaviorSubject por meio do método next.

Por último, nosso exemplo irá mostrar como "assinar" o BehaviorSubject do service. Vamos criar a classe GraficosComponent, e como você pode ver na figura, foi criado um objeto subs do tipo Subscription que como eu tinha falado anteriormente, ele nos possibilita adicionar o objeto que queremos "observar". Então no método ngOnInit, é adicionado o objeto filtroPagina que é um BehaviorSubject e está no FiltroService que criamos anteriormente.

Concluindo

Como visto, o nosso componente GraficosComponent "assinou" o BehaviorSubject que contém o dado centralizado e assim como o GraficosComponent, qualquer outro componente que precise do dado do filtro atualizado, deve assinar, esperar ser notificado de alguma alteração e o próprio componente realiza as atualizações necessárias após receber o filtro atualizado.

Bom, espero ter ajudado!

Trafegando dados entre componentes com EventEmitter (@Output)

Flavio Camello — Wed, 12 Feb 2020 19:37:50 +0000

Para quem está começando a utilizar o framework Angular, eu irei apresentar algo que será utilizado com frequência, então, é importante que saiba muito bem como e quando utilizar. Vou mostrar o funcionamento do decorador @Output.

Para que serve?

A arquitetura do angular nos permite criar diversos componentes, o que é muito bom, visto que a reutilização de código fica mais fácil. Mas, também existem dificuldades com essa arquitetura, uma delas é que os componentes podem ser utilizados dentro de outros componentes. Com isso, surge um problema que é, a necessidade de troca de informações entre o componente filho e o componente pai. Para isso, utilizamos o @Output. O @Output é responsável por facilitar a comunicação de filho para o pai. O nome @Output passa a ideia de saída de um valor, que é o que acontece na visão do componente filho.

Exemplo prático

Vamos criar um programa que irá listar o nome de personagens. Os personagens serão inseridos no componente filho e exibido no componente pai. Vamos começar implementando o componente filho. Nele criaremos a variável novoPersonagem que será decorado pelo @Output.

Perceba que, a variável novo personagem recebe o new EventEmitter que faz parte do @angular/core. O EventEmitter permite ao componente filho gerar um evento para o componente pai, que será utilizado quando existir a necessidade de enviar algo. Além disso, na imagem podemos ver o método enviarParaPai que recebe uma string. Esse método utiliza o emit para emitir ao componente pai que queremos enviar algo, que nesse caso é a variável value.

Para chamar o nosso método enviarParaPai e assim disparar o evento de emitir, vamos implementar o html do filho.

O html possui um input para que o usuário escreva o nome dos personagens, e um button que chama o método enviarParaPai passando o que está escrito no input. O próximo passo é no pai.

Começamos pelo html, que possui também um ngFor para exibir todos os personagens adicionados.

Perceba que no componente filho decoramos a variável novoPersonagem e emitimos a inserção de um novo personagem. No html do componente pai, ele aparece novamente pois recebeu o decorador @Output o que lhe permite comunicar com o componente pai. Ao emitir um valor será chamado o método addPersonagem passando o item transmitido pelo emit que foi enviado pelo filho.

Para finalizar, vamos implementar o typeScript do componente pai, que deve conter a variável que irá guardar o nome dos personagens, e o método addPersonagem que irá adicionar o novo personagem emitido.

Espero que esse texto tenha ajudado a você que está começando!

Trafegando dados entre componentes com inbound property (@Input)

Flavio Camello — Wed, 12 Feb 2020 13:31:37 +0000

Para quem está começando a utilizar o framework Angular, eu irei apresentar algo que será utilizado com frequencia, então, é importante que saiba muito bem como e quando utilizar. Vou mostrar o funcionamento do decorador @Input.

Para que serve?

A arquitetura do angular nos permite criar diversos componentes, e esses componentes podem ser utilizados dentro de outros componentes. Em muitos casos, é necessário trocar informações entre o componente pai e o componente filho, e aí que entra o @Input. O @Input é responsável por facilitar a comunicação de pai para o filho. O nome @Input passa a ideia de inserção de um valor, que é o que acontece na visão do componente filho.

Exemplo prático

Vamos começar mostrando o que o componente pai deve implementar para que consiga passar um dado para o seu componente filho. Ele simplesmente deve criar a varável que será passada. Esta variável pode ser de qualquer tipo, no exemplo utilizamos uma string:

Perceba que criamos a variável chamada, variavelDoPai e inserimos o valor "Angular".
Para passar a variável, vamos ao html do componente pai. Lá passamos a variável junto ao selector do componente filho, da seguinte forma:

Repare que, entre aspas está a propriedade fonte que é a variável do pai. E entre colchetes está a variável alvo, que é a do componente filho.

Agora, vamos implementar a parte do filho. No TypeScript do componente filho, criaremos a variável que irá receber o valor. Como visto na figura anterior, o nome que escolhemos para a variável é, variavelDoFilho. Então iremos declara-la com o decorador @Input como mostra a imagem:

Caso esta variável seja utilizada em tela, é preciso apenas fazer um data binding:

Espero que esse texto tenha ajudado a você que está começando!