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:

<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:

// 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!