Você está aprendendo
Ver documentação
Interação entre componentes
Objetivo: 3 acertos
Prêmio: 1 conquista de Angular
Progresso atual:
Olá, bem vindo a sala Interação entre componentes de Angular
Esta sala possui um pré-requisito recomendado
Clique no botão abaixo, desbloqueie conteúdos, exercícios e conquiste essa sala.
Temos vagas de Angular
3 vagas disponíveis
Obrigado pelo seu feedback.
Esta sala possui um pré-requisito recomendado
Conteúdo da sala
Sala
Documentação
Angular: Interação entre componentes

Esta sala aborda diversas técnicas que permitem a comunicação entre dois ou mais componentes no Angular. A comunicação entre componentes pode ser utilizada para atingir vários objetivos, como por exemplo, uma separação melhor entre os códigos, utilizando um componente para receber os dados que serão informados pelo usuário e outro apenas para validação.

Características:

  • Possibilita a troca de informações entre componentes diferentes

Exemplo de código: Input Binding

//pai.componente.ts
import { Component } from '@angular/core';


@Component({
    selector: 'app-pai',
    templateUrl: './pai.component.html',
    styleUrls: ['./pai.component.css']
})
export class PaiComponent{
    nomePai = 'Eduardo';
}


//filho.component.ts
import { Component, Input } from '@angular/core';


@Component({
    selector: 'app-filho',
    templateUrl: './filho.component.html',
    styleUrls: ['./filho.component.css']
})


export class FilhoComponent {
    @Input() nomeFilho: string;
}


//pai.component.html
<app-filho [nomeFilho]="nomePai"></app-filho>

//filho.component.html
<p>Nome do usuário: {{ nomeFilho }}</p>

O que eu preciso aprender?

1 - Interação entre componentes