Olá Gerson, tudo bem?
O componente principal de uma aplicação Angular é o AppComponent, isso é declarado no AppModule, o módulo raiz da aplicação, onde a diretiva @NgModule recebe um objeto de metadados para declarar os componentes, diretivas e pipes que pertencem a esse conjunto, declarations, importar outros módulos que os componentes dependam, imports, passa servicos que os componentes precisam, providers, e informa o componente que vai ser carregado quando a aplicação for carregada, bootstrap, metadado que só é encontrado no módulo raiz.
@NgModule({
declarations: [
AppComponent,
NovaTransferenciaComponent,
ExtratoComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
O AppComponent por ser o componente principal da aplicação, todos dos componentes declarados no módulo serão filhos dele.
Os dados podem ser passados para outros componentes com o uso das diretivas @Input() ou @Output(). No caso do NovaTransferenciaComponent , com uso da diretiva @Output, os dados do formulário são emitidos por um evento aoTransferir()
export class NovaTransferenciaComponent {
@Output() aoTransferir = new EventEmitter<any>();
valor: number; destino: number;
transferir() {
console.log('Solicitada nova transferência');
const valorEmitir = { valor: this.valor, destino: this.destino };
this.aoTransferir.emit(valorEmitir);
this.limparCampos();
}
limparCampos(){ . . . }
}
e passado para o AppComponent por um método que tem como parâmetro.
<app-nova-transferencia
(aoTransferir)="transferir($event)"
></app-nova-transferencia>
O método transferir() vai adicionar os dados vindo do evento emitir para uma variável.
export class AppComponent {
title = 'bytebank';
transferencia: any;
transferir($event) {
console.log($event);
this.transferencia = $event;
}
}
Com isso o AppComponent consegue usar os dados como por exemplo para exibir em tela com interpolação.
<app-nova-transferencia
(aoTransferir)="transferir($event)"
></app-nova-transferencia>
<app-extrato></app-extrato>
<p>Valor: {{ transferencia?.valor }}</p>
<p>Destino: {{ transferencia?.destino }}</p>
