Criar um filtro utilizando BehaviorSubject
Tags: angular
Published: 2020-03-18 18:34:49

A principal função da utilização do <strong>BehaviorSubject</strong> é permitir uma fonte única de dados. Com uma visão centralizada de dados, o <strong>BehaviorSubject</strong> 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 <strong>RxJS</strong> que possui observadores e observáveis. Da biblioteca vamos utilizar o <strong>Subscription</strong> que funciona de forma muito parecida com o <strong>Observable</strong>. Com ele nós podemos utilizar o método <i>add</i>, onde adicionamos o objeto que será "observado". Além disso, utilizaremos o <strong>BehaviorSubject</strong>, que será utilizado para conter o valor centralizado, e por emitir que o objeto sofreu alteração no valor atual.

<h3>O que faremos em nosso exemplo?</h3>
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.

<h3>Agora, mãos a massa!</h3>
Primeiro, vamos criar um objeto para ser o filtro. Para simplificar o nosso exemplo, o nosso filtro é apenas um filtro de perfil.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k10gogdjqs8iv7n7bt9s.PNG)

Agora criaremos a classe mais importante do nosso exemplo, o <i>FiltroService</i>. 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<strong> BehaviorSubject</strong>. Então, toda vez que o filtro for alterado, o método <i>updateFiltro</i> será chamado recebendo o novo filtro. O filtro centralizado irá receber o novo filtro, e enviar a todos os componentes que assinam o<strong> BehaviorSubject</strong> por meio do método <i>next</i>.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/en6gptxjzjuzr2iyu9gg.PNG)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n7rzir3bf06solcqb1h3.PNG)

<h3>Concluindo</h3>
Como visto, o nosso componente <i>GraficosComponent</i> "assinou" o <strong>BehaviorSubject</strong> que contém o dado centralizado e assim como o <i>GraficosComponent</i>, 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!