Como Compartilhar Variáveis No Angular

No desenvolvimento diário de componentes reutilizáveis no Angular, nos deparamos com situações em que desejamos compartilhar variáveis, que estão no “componente pai” e queremos que de alguma forma, seja feita essa conexão entre os componentes.

O compartilhamento de variáveis, com o Angular, é muito mais fácil do que parece!

Configurando nossos componentes

Vamos considerar o cenário onde temos o componente pai MainComponent, onde realizamos o GET de usuários e desejamos enviar para o componente UsersComponent, o resultado do GET de usuários realizado no pai.

Para isto, primeiramente no HTML do MainComponent devemos passar como “parâmetro” esta variável, da seguinte forma:

1
<app-users [users]="users"></app-users>

Note que o que estamos passando dentro das aspas, deve ser o mesmo nome de variável que temos em nosso arquivo Typescript!

Feito isso, devemos apenas criar users dentro de nosso UsersComponent, mas com uma pequena diferença:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// users.component.ts

import { Component, Input } from '@angular/core';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
})

export class TeamModalComponent {
// Com este @Input(), dizemos que
// esta variável está associada ao
// componente pai, MainComponent
@Input() users;
}

Com isto feito, você terá acesso à variável que foi criada no componente pai e poderá manipulá-la normalmente dentro do seu componente filho!