Neste post vamos mostrar os detalhes de como podemos passar valores para um componente, bem como emitir valores para fora do componente
Conteúdo
@Input
@Output
EventEmitter
@Input
O decorator @Input é utilizado quando queremos passar valores para o componente, para entender o funcionamento deste decorator vamos criar um outro componente
ng g c exemploInput
Componente criado, vamos então editar o arquivo exemplo-input.component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-exemplo-input',
templateUrl: './exemplo-input.component.html',
styleUrls: ['./exemplo-input.component.css']
})
export class ExemploInputComponent implements OnInit {
constructor() { }
@Input()
public nome:string;
ngOnInit() {
}
}
Para utilizarmos o decorator @Input, precisamos importar "Input" do pacote "@angular/core"
import { Component, OnInit, Input } from '@angular/core';
então definimos um propriedade pública "nome" que será decorada com @Input().
Vamos agora editar o template html (exemplo-input.component.html) do nosso componente para que possamos ver a passagem de valor
<p>
Meu nome é <strong>{{nome}}</strong>
</p>
Vamos agora incluir nosso componente na página home de nossa aplicação, vamos editar o arquivo home.component.html, passando um valor para a nossa propriedade "nome" conforme mostrado abaixo:
<div style="text-align:center">
<app-exemplo-input nome="Adilson" ></app-exemplo-input>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
Vamos adicionar outr propriade publica, neste caso pra representar a idade.
Desta vez vamos dar um alias para a propriedade
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-exemplo-input',
templateUrl: './exemplo-input.component.html',
styleUrls: ['./exemplo-input.component.css']
})
export class ExemploInputComponent implements OnInit {
constructor() { }
@Input()
public nome:string;
@Input('idade')
public valorIdade:string;
ngOnInit() {
}
}
ja o o template exemplo-input.component.html ficará
<p>
Meu nome é <strong>{{nome}}</strong> <br />
tenho <strong>{{valorIdade}}</strong> anos
</p>
e na página home vamos informar o valor para a nossa proprieade utilizando o alias
<div style="text-align:center">
<app-exemplo-input nome="Adilson" idade="18" ></app-exemplo-input>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
Na verdade não tenho dezoito anos, apenas um pouco mais, kkkkk
@Output
Agora vamos ver como configurar um componente para que possa compartilhar valores com outros compoenentes, utilizando em conjunto o decorator @Output e a classe EventEmitter
Vamos criar então mais um componente com o comando
ng g c exemploOutput
Após a geração do compomente, vamos editar o arquivo exemplo-output.component.ts e insegir o código abaixo:
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-exemplo-output',
templateUrl: './exemplo-output.component.html',
styleUrls: ['./exemplo-output.component.css']
})
export class ExemploOutputComponent implements OnInit {
@Output()
contadorAlterado:EventEmitter<number> = new EventEmitter<number>();
contador: number = 1;
constructor() { }
incrementa(){
this.contador++;
this.emiteEvento(this.contador);
}
decrementa(){
this.contador--;
this.emiteEvento(this.contador);
}
emiteEvento(evento){
this.contadorAlterado.emit(evento);
}
ngOnInit() {
}
}
Para utilizar o "Output" devemos prieimeiramente fazer o import em "@angular/core"
import { Output } from '@angular/core';
vamos então declarar o evento "contadorAlterado" utilizando a classe EventEmmiter, que também deve ser importada a partir do módulo "@angular/core"
O evento contadorAlterado será exposto para que outros componentes possam utilizá-lo, porém para que possamos passar o valor alterado temos que emitir o evento
contadorAlterado.emit(this.contador);
Então criamos os métodos inrementa e decrementa que serão responsáveis de alterar o valor da variável "contador" e também disparar o evento através do método "emiteEvento"
incrementa(){
this.contador++;
this.emiteEvento(this.contador);
}
decrementa(){
this.contador--;
this.emiteEvento(this.contador);
}
O html do componente ficará assim:
<div class="text-center">
<br />
<br />
<div class="col-md-3 col-md-offset-3">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-info" (click)="decrementa()">
-
</button>
</span>
<input [(ngModel)]="contador" (ngModelChange)="emiteEvento($event)" type="text" class="form-control text-center" value="1" min="-10" max="40">
<span class="input-group-btn" (click)="incrementa()">
<button class="btn btn-info">
+
</button>
</span>
</div>
</div>
</div>
E em nosso home.component.html vamos incluir o componente exemplo
<div style="text-align:center">
<app-exemplo-output (contadorAlterado)="contadorChange($event)"></app-exemplo-output >
</div>
em home.component.ts, vamos então criar o método contadorChange queserá chamado quando o componente for incrementado ou decrementado, logando o valor console
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
contadorChange(event){
console.log(event)
}
}
executando nossa aplicação
ng serve -o
clicando nos botões (+) e (-) podemos ver então que o valor do componente está sendo emitido para home.component.ts e sendo logado no console