Para esse artigo, nós iremos partir de um projeto já criado com o Angular Cli.

Nosso primeiro passo será a criação de um Service para que possamos receber os nossos dados. Para isso, execute o comando a baixo no seu terminal:

ng g s services/Person

A execução desse comando irá gerar dois novos arquivos .ts dentro de um novo diretório chamado services na nosso Solution. Podemos ver esse passo na imagem a baixo:

O arquivo person.service.spec.ts é criado para que possamos testar o nosso service; não iremos utilizá-lo nesse artigo. Agora, o arquivo person.service.ts será o responsável por receber os nossos dados externos e passar em forma de Injeção de Dependência para os nossos componentes.

Para que possamos utilizar o Lodash, nós iremos precisar de um objeto que retorne uma lista de dados. Para esse exemplo nós iremos criar um mock de uma lista de pessoas. Para isso, adicione um novo arquivo chamado persons.json e adicione os dados a baixo nele:

[
{
"id": 1,
"name": "Steve Jobs",
"birthday": "24/02/1955"
},
{
"id": 2,
"name": "Bill Gates",
"birthday": "28/10/1955"
}
]

Nosso próximo passo será importação da nossa lista dentro do nosso arquivo person.service.ts. Para que possamos importar algum módulo ou arquivo no TypeScript, nós podemos utilizar o require junto com o caminho do arquivo. Mas antes de utilizarmos-o, precisamos adicionar uma referência no nosso arquivo typings.d.ts:

declare const require : any;

Agora, abra o seu arquivo de serviço e adicione a seguinte linha de código nele:

const persons = require(‘./persons.json’)

Notem que para importar o nosso arquivo de mock, estamos utilizando o ./persons.json. Fizemos isso porque ele foi criado dentro da pasta services, mesmo caminho que nós criamos o nosso Service.

Agora, vamos importar a biblioteca do Lodash para o nosso projeto. Para isso, execute o comando a baixo no seu terminal:

npm install --save lodash

Para quem não conhece o Lodash, ele é uma biblioteca que facilita muito o nosso trabalho com a manipulação de arrays, numbers, objects, strings etc. Caso queira conhecer ele melhor, segue o link da sua documentação.

Vamos, agora, criar um método para que possamos listar os nossos dados. Para isso, abra o seu arquivo de service novamente e adicione o código a baixo nele:

getAll() {
    let result = persons;
    return result;
 }

O método acima está bem simples. Estamos criando uma variável chamada result e passando para ela a nossa lista. Para que possamos testá-la, abra o seu arquivo app.component.ts e adicione o código abaixo dentro do seu construtor:

constructor(public personService: PersonService) 
{
      console.log(personService.getAll());
}

Acima nós estamos injetando o nosso service no nosso app.component.ts. Em seguida, nós chamamos o método criado para trazer todos os nossos resultados e enviamos os valores para nossa console.

Vamos, agora, utilizar o Lodash para criarmos uma pesquisa que nos retorne um valor pelo Id da pessoa. Para isso, adicione o código a baixo dentro do seu Person service:

getById(id: number) {
    let result = persons;
result = _.find(persons, (person) => {
      return person.id = id;
    })
return result;
  }

Vamos entender o nosso código: nós estamos criando um método simples recebendo um id. Em seguida, nós declaramos uma variável e passamos o valor da nossa lista para ela. Por fim, nós utilizamos o método .find do Lodash para buscar um resultado pelo Id. Para que possamos testar, adicione a linha a baixo dentro do construtor do seu app.component.ts:

console.log(personService.getAll());
console.log(personService.getById(1));

Agora rode o projeto com o comando ng serve, caso todos os passos anteriores estejam OK, você irá ver os valores a baixo na console do seu navegador o retorno dos métodos getAll e getById:

Acima, nós temos um exemplo simples de utilização do Lodash. Podemos encontrar na documentação muitos outros exemplos que podem facilitar o desenvolvimento no nosso dia-a-dia.