Olá pessoal! Tudo na paz?

Este artigo vai ser breve, vou ensinar como instalar o bootstrap de uma forma simples e rápida.

Primeiro vamos abrir o terminal do nosso VS Code no nosso projeto em Angular.

“Aos que ainda não sabem como iniciar um projeto em Angular, segue o link do artigo onde ensino: https://medium.com/@alefbacelar/criando-projeto-em-angular-8f2b7aca7bb7”.

Agora vamos digitar o comando abaixo no terminal:

npm install bootstrap --save

Agora no nosso styles.scss global:

vamos adicionar o seguinte import.

@import '~bootstrap/dist/css/bootstrap.min.css'

E fácil assim você já pode utilizar o bootstrap. Agora vamos no site do bootstrap: https://getbootstrap.com/docs/5.2/customize/components/

Peguei um nav-bar:

E uma table:

Meu código HTML do home-component.html no link abaixo:

E meu SCSS do home-component.scss:

.container {

margem superior: 10%;

cor da borda: rgb(139, 139, 139);

estilo de borda: sólido;

raio da borda: 15px;

}

uma{

cor branca;

}

Após as alterações vamos ver nossa tela de home:

Prontinho, agora já temos uma estrutura preparada para começarmos um CRUD :)

Na próxima falaremos como simular uma API REST.

Instalando Bootstrap ao nosso Projeto Angular was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dando continuidade à minha série de artigos rápidos, hoje demonstrarei como podemos trabalhar com variáveis de ambiente em um projeto Angular dockerizado.

Para pular a etapa de criação de um novo projeto, eu utilizarei a versão final do código que eu criei para este post rápido. Caso tenha interesse em clonar este repositório, seguinte o seu link no meu Github: angular-docker-env.

Este projeto foi desenvolvido com uma versão recente do Angular e adicionado/alterado alguns arquivos que demonstrarei nos próximos passos, para que possamos passar dados o Docker no momento de criação do nosso container e receber essas informações no Angular.

Com o projeto aberto no seu editor de preferência, vamos navegar pelo projeto. Os primeiros arquivos alterados foram os de ambiente, eu adicione uma propriedade chamada UrlImagem dentro deles:

environment.prod.ts
export const environment = {
production: true,
UrlImagem:'${URL_IMAGEM}'
};

environment.ts
export const environment = { 
 production: false, 
UrlImagem:'https://br.web.img3.acsta.net/newsv7/20/02/03/22/01/2947023.jpg'
};

Em seguida foi injetado o valor da urlImagem no arquivo app.component.ts:

Por fim, foi adicionado dois arquivos no projeto, um Dockerfile e um outro chamado nginx.config para que possamos dockerizar o nosso projeto.

e o nginx.config:

Agora para testar este fluxo, vamos rodar o projeto para verificar se tudo está funcionando corretamente. Primeiro vamos executar ele local (ambiente de dev) com o comando ng serve --open , depois rodar ele dentro de um container Docker.

Assim que o comando ng serve --open finalizar ele vai abrir o projeto no navegador, e caso tudo esteja funcionando corretamente, você deve ter o seguinte resultado no seu navegador:

Agora para verificar o ambiente com o Docker, execute os seguintes passos:

Criação da nossa imagem:
docker build -t angular-docker-env . 

Criação do nosso container passando a URL através do Env do Docker
docker run -d -p 3090:80 --env URL_IMAGEM='https://th.bing.com/th/id/R.ee80696d91a77436c3dcef705777437d?rik=jFxlZAHJvPiC3g&pid=ImgRaw&r=0' angular-docker-env

Assim que o container for criado, abra no seu navegador o seguinte endereço: localhost:3090 e caso tudo esteja funcionando corretamente, você deve ver a seguinte imagem:

Bom era isso que eu queria passar para vocês, espero que tenham gostado e até um próximo artigo pessoal ;)

[Dica rápida] Docker + Angular variáveis de ambiente was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hey folks,

Let's talk in this chapter about Angular Directives.

Introduction

Directives are like markers on DOM element that communicate to Angular to include a specific behavior.
There three types of directives on Angular:

Attributes directives: Change the appearance or the behavior of an element, component or another directive, as ngClass and ngStyle;

Structural directives: Modify the layout adding or removing DOM elements, as ngIf and ngFor;

Components: Are directives with a model

Starting the app on your terminal:

ng new diretivasPoc

Let's create a app that we can know a bit the directives that we will talk on this article:

Begin with ngIf:

It is a directive that allow us to change a page from a conditional declaration and that supposed to mean that put a ngIf in an element or component we can create or remove this element in the condition we provide:

To sum up convert a furnished value to an equivalent to true or false…after decides if show or not the element.

ngSwitch

It is a directive that show an element of a group in basis of a condition. It uses the directives ngSwitchCase and ngSwitchDefault:

Set a variable and uses in .html and setup below.

The result will be something like this:

ngFor

Do you know when we view a table list with a lot of information?
This happens with the help with a repetition loop that create all data one by one…
So the ngFor is a right tool to have on your sleeve.
How use the tool?

As below, we have a list to iterate:

We can present the data as a list or in a table list:

Look how we see this:

ngClass

It is a directive that allows you define a class dynamically from Dom element.
Let's on real how works:

Note that if !isFavorite show the icon (bi-star), else isFavorite (bi-star-fill)

ngStyle

It is used to add style in DOM element, look bellow:

On this example, I was far away using Inputs two way data binding to change the color font and size:

And this is it guys, this is a resume of how works with this basics directives. Considerer that we have too custom directives that allows you to create your own rules.
Take a look on my Github on this repo.

See you all on the next….byeee

Angular Directives — #3 was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hey folks,

Let`s talk in this chapter about Angular Services.

Introduction

Services in Angular are a medium to of communication between components.
The services are a great way to share data that doesn't know each other.
In this article we will build an app that will get a lot a of Digimon from an API-Rest.

Starting the app on your terminal:

ng new servicePoc

Once your repo was created, let's create a service class:

Something like this will be presented:

Adding httpClient, injectin on the constructor as private httt: HttpClient.

HttpClient is a npm Angular package for making API calls over the backend server, to communicate frontend and backend and present a dynamic web app.

Injecting a Service

Right now our project will have that face config.

Do not forget to import the HttpClientModule on app.module:

Note that we created a method inside the service ( getDigimonList). To call achieve the data from our API, check the JSON on link bellow:

https://digimon-api.vercel.app/api/digimon

In the link, note on service that was separated to link to the route this is because if we need to get another routes, will be easy to provide the maintenance.
How many routes we need, we can add like above ( personally I find it easier).

With this did, now we will inject this service on component and present the html.
We can inject a service in a component, as following below:

In the constructor , we can inject Service and we have subscribe the getAll list method to get the data and use it. On this particular example we will obtain the lista data from the api. Do not forget of call the method on ngOnInit() to start the app and has the method on execution.

Follow below the Html where we will present the data:

The final is result will be something like that:

Conclusion

— The structure of angular app, once that we use to not repeat the code more the one time, the service centralize our business logic.
 — Can be easily injected by dependency injection.
 — They are very useful to use in more the one component.

To sum up, they must have contain logic. They need to be completely apart from view schemes.

So, this is it guys.
To checkout the code, follow the link of repo on github:
https://github.com/RafaelNevesdeOliveira/ServicePoc

Angular Service (GET) — #2 was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hello everyone,

With the encouragement of my mentor and great friend Thiago Adriano, I decided to start a series of articles about my journey of technological studies.
This week to start things off I will introduce Angular Pipes.

So let’s see what we can do…

What is Angular Pipe?

A brief introduction.

Pipes are used to transform, currency amounts, dates and a lot of data for display.
They are simple functions to use in template model to accept a enter value and return a transformed value.
It very useful because we can use in all application and declare just one time.

Angular provides integrated pipes about typical data, including locale transformations, follow some commom pipes:

Date: formate date according to local rules
Uppercase: transform text in upper case
Lowecase: transform text in lower case
Currency: transform a number to a currency string, according to local rules
Decimal: provide decimal point, according to local rules
Percent: transform number to percentage string

Follow ahead, let’s the two examples of custom pipes and how we can implement it.

Using Angular CLI.

ng g new pipe-test

ng g c pipestest

Create a folder to alocate your pipes and we have something like that?

Once we have created your files to present the pipes, let’s create two custom pipes:
1 — CPF and CNPJ

ng g p cpf-cnpj

I’ll not enter in details about Regex (Regular Expression), but as you can see below we use to replace characters equal to 11 to cpf and equal to 14 to cnpj, returning expressions with the correct expression.

2 — Converting Fahrenheit temperature to Celsius or Celsius to Fahrenheit

PS: Note that both pipes we have implemented PipeTransform ( it is a interface that is call by pipes to perform a transformation. Angular invokes that methos to binding the first value to any parameter to the second.

As result of this Pipes we have the following:

The #1, we have a regular pipe from angular, and about #2 and #3 Custom Pipes.
As you can note, on column of Raw Data is the raw data that we can input or receive from a API, and the Pipe Trnasform is the result treated by a pipe

Follow HTML to see how we call the pipes.

Do not forget to import the pipes on App.Module to use on HTML.

So this is it fellows, I will focus on post more articles about angular and another techs.

Until the next..byee

Angular Pipes was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Olá pessoal, aqui veremos um passo a passo de como criar um projeto em Angular e como rodar o projeto no terminal usando o comando “ng serve”.

Vou partir do principio que todos já tenham sua maquina configurada com o Node JS e Angular CLI.

Vamos começar criando uma pasta e dando um nome para ela:

Na sequencia iremos entrar na pasta recém criada e abrir o terminal a partir dela:

Dentro do terminal iremos digitar o seguinte comando “ng new projeto-angular”

Vai aparecer está mensagem abaixo e só digitar “y” e escolher a opção “SCSS”

Agora é só aguardar a instalação dos pacotes npm. Isso pode demorar alguns minutos.

Após a instalação dos pacotes, vamos digitar o seguinte comando no terminal: “code .” este comado irá abrir o VS Code.

A estrutura do seu projeto vai estar dessa forma:

Agora precisaremos abrir o terminal do VS Code, e fazer o caminho entre as pastas até a pasta app: “cd .\projeto-angular\src\app’’

Agora é só digitar o comando “ng serve” e aguardar a compilação.

Depois de concluída, irá aparecer um link no terminal e é só abri-lo.

Link: http://localhost:4200

Essa será a tela que você vai ver:

Bom pessoal este foi um artigo bem simples e bem resumido. No próximo vou ensinar como criar um componente e organizar o projeto no qual daremos seguimento. :)

Link do vídeo: https://youtu.be/JM0T_Bace1o

Criando Projeto em Angular was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

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:

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:

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.

O próximo passo será informar como você deseja trabalha 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 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:

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

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

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:

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.

Espero que tenham gostado e em bre ;)

Angular 7: novas funcionalidades was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Dando continuidade aos meus artigos sobre Route Guards, hoje irei apresentar como utilizar o CanDeactivate.

Caso tenha interesse em ler os primeiros artigo, segue o link de cada um deles abaixo:

• Angular 6: Route Guards
• Angular 6: Route Guards — Parte 02

O CanDeactivatedeve ser utilizado em cenários onde precisamos verificar se o usuário pode desativar um rota (ir para uma outra rota) ou não. Imagine o seguinte exemplo: O seu usuário está preenchendo um formulário e antes de salvar ele tenta ir para uma outra rota, com o canDeactivate você pode Interceptar e enviar uma mensagem para ele, solicitando que confirme se realmente deseja realizar essa operação.

Para os próximos passos eu irei utilizar o projeto iniciado no meu artigo anterior. Caso tenha interesse em clonar ele, segue o seu link no GitHub: Angular 6 Guards.

Abra esse projeto no seu editor de textos, em seguida execute o comando abaixo no seu terminal:

ng g s guards/productsdeactivate
ng g c products/product-edit

O passo anterior deve criar um serviço chamado ProductsdeactivateService e um componente chamado ProductEditComponent. Adicione esse novo componente nas suas rotas, em seguida abra o arquivo productsdeactivate.service.ts e atualize ele com o trecho de código abaixo:

Não esqueça de adicionar esse serviço nos providers do seu ProductsModule.

providers: [ProductsdeactivateService]

Agora adicione o CandDeactivate na sua rota edit:

{ path: 'product-edit/:id', component: ProductEditComponent, canDeactivate: [ProductsdeactivateService] },

Em seguida atualize o arquivo app.component.html com o seguinte trecho de código:

Testando

Para testar execute o comando ng serve, em seguida abra no seu navegador o endereço: http://localhost:4200/. Abaixo você tem uma imagem demonstrando esse passo:

Bem simples né?

Dessa forma você consegue notificar o seu usuário antes que ele saia de uma determinada rota sem finalizar alguma ação necessária.

Bom, espero que tenham gostado e até um próximo artigo pessoal.

Angular 6: CanDeactivate was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

No meu artigo anterior eu falei sobre Angular Lazy Loading. Hoje irei demonstrar como proteger as nossas rotas utilizando o Route Guards.

Esse artigo será dividido em duas partes, nessa primeira irei apresentar duas formas de gerenciamento: CanActivate e o CanActivateChild. Para quem não conhece o Guard, em um breve resumo ele nos permite gerenciar a navegação das nossas rotas, abaixo irei criar alguns exemplos para que você possa entender ele melhor.

Existem quatro tipos diferentes de Guard:

• CanActivate: válida se a rota está ativa
• CanActivateChild: válida se a rota filha está ativa
• CanDeactivate: verifica se uma rota pode ser desativada
• CanLoad: válida se um módulo está utilizando o lazily loading

Implementando Guards

Para demonstrar a implementação do Guards eu irei utilizar um projeto desenvolvido no meu artigo anterior mencionado acima. Caso você tenha interesse em baixar ele, segue o seu link no GitHub: Angular-lazyloading.

O primeiro passo será criar uma interface. Para isso, abra um terminal no seu computador, navegue até o projeto clonado e em seguida execute o seguinte comando: ng g s guards/AuthGuard.

Esse comando criará uma nova pasta dentro de app chamada guards com dois arquivos: auth-guard.service.ts e auth-guard.service.spec.ts. Abra o arquivo auth-guard.service.ts e atualize ele com o seguinte trecho de código:

Conforme você pode ver na imagem abaixo, o método canActivate retorna um boolean, eu deixei seu retorno como false para que possamos proteger o HomeModule.

O próximo passo será adicionar o AuthGuardService nos providers do AppModule. Para isso, abra o seu arquivo: ./app/app.module.ts e adicione o trecho de código abaixo:

providers: [AuthGuardService],

Testando o CanActivate

Agora execute o comando ng serve no seu terminal, em seguida abra o endereço http://localhost:4200/ no seu navegador. Abaixo você tem uma imagem demonstrando o resultado desse passo:

Como essa rota está protegida nós não conseguimos acessar o HomeModule. Agora altere o retorno da variável isAuthenticated em AuthGuardService para true e de um refresh na tela. Note que agora a rota está acessível.

CanActivateChild

Existem cenários onde precisaremos criar um módulo com componentes e esses componentes com filhos. Em projetos desenvolvidos com Angular nós podemos utilizar as rotas children.

Para ficar mais claro, vamos criar um novo módulo chamado produtos. Abra o seu terminal novamente e execute o comando abaixo:

ng g m products --routing

Esse comando irá criar um novo módulo chamado products. Vamos agora criar três novos componentes dentro dele:

ng g c products/product-list
ng g c products/product-details
ng g c products/product-details/overview

Agora abra o seu arquivo products-routing.module.ts e atualize ele com o trecho de código abaixo:

Em seguida adicione o ProductsModule em app-routing.module.ts.

{
  path: 'products',
  loadChildren: './products/products.module#ProductsModule'
},

O próximo passo será a criação de um serviço para implementarmos o CanActivateChild. Para isso, execute o comando abaixo no seu terminal:

ng g s guards/AuthGuardChild

Esse comando criará dois arquivos dentro do diretório app/guards/. Abra o auth-guard-child.service.ts e atualize ele com o trecho de código abaixo:

Analisando o código acima nós temos:

• 08: implementando a interface CanActivateChild
• 10: Criação de uma variável para simularmos um usuário logado
• 13: estamos recebendo um snap da rota ativada
• 14: estamos recebendo o estado da rota ativa

Esse método deve retornar: Observable<boolean> | boolean

Testando o CanActivateChild

Agora execute o comando ng serve e abra o endereço http://localhost:4200/ no seu navegador: . Em seguida tente acessar as rotas abaixo:

http://localhost:4200/products 
(irá apresentar o conteúdo de list)
http://localhost:4200/products/product-details/13
(deve direcionar para home do projeto)

Abaixo você tem uma imagem demonstrando esse passo:

Agora para liberar essa rota basta alterar o valor da variável isAuthenticated em auth-guard-child.service.ts para true . Abaixo você tem uma imagem demonstrando esse passo:

Agora para que possamos verificar o retorno dos parâmetros route e state atualize o arquivo guard-child.service.ts com o trecho de código abaixo:

Em seguida abra a rota no seu navegador: /products/product-details/13. Para analisar os dados de retorno eu irei utilizar a ferramenta tools do Chrome. Abaixo você tem duas imagens demonstrando esses resultados.

Agora expandindo ActivatedRouteSnapshot nós temos os valores abaixo:

Nós podemos trabalhar com esses dados dentro do método canActivateChild, basta você utilizar as duas variáveis criadas route e state.

Abaixo você tem um exemplo onde eu adicionei um console com o valor console.log(route.params) dentro do método canActivateChild.

Bem simples né? Com isso finalizamos a primeira parte desse artigo sobre Guards, no próximo irei demonstrar o CanDeactivate e CanLoad. Espero que tenham gostado e até um próximo artigo pessoal.

Angular 6: Route Guards was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.

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 utilizar ele 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 modulo ou arquivo no TypeScript, nós podemos utilizar o require junto com o caminho do arquivo, mas antes de utilizarmos ele, nós precisamos adicionar uma referencia 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 variavel chamada result e passando para ela a nossa lista. Para que possamos testar ela, abra o seu arquivo app.component.ts e adicione o código a baixo 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 nós 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.

Lodash com Angular 4 was originally published in angularbr on Medium, where people are continuing the conversation by highlighting and responding to this story.