Entradas
El siguiente ejercicio propone un proyecto muy simple en el que un componente padre se encarga de recoger dos valores que le pasa al hijo para realizar una operación sencilla (suma, resta, multiplicación y división) y, una vez obtenido el resultado, el mismo se devuelve al padre para que este se muestre en su vista.
Crear prototipo comBC -> ng new comBC
Crear componente compo1 -> ng g c compo1
Abrimos la aplicación con nuestro editor y dejamos en app.component.html el siguiente contenido:
<div class="padre">
<table border="1">
<th coldpan="2" style="text-align: center">Padre</th>
<tr>
<td>Valor1</td>
<td><input class="form-control" [(ngModel)]="valor1"></td>
</tr>
<tr>
<td>Valor2</td>
<td><input class="form-control" [(ngModel)]="valor2"</td>
</tr>
<tr>
<td>Resultado: </td>
<td><b>{{ resultadoP }}</b></td>
</tr>
<table>
</div>
<app-compo1 [valor1]="valor1" [valor2]="valor2" (envRes)="captaResultado($event)">
</app-compo1>
En app.component.ts modificaremos la clase AppComponent para que tenga lo siguiente:
export class AppComponent {
valor1: string = '10';
valor2: string = '20';
resultadoP: number;
captaResultado(event) {
this.resultadoP = event;
}
}
Ahora, modificaremos compo1.component.html para añadir los botones con las operaciones:
<div class="hijo">
<table border="1">
<th colspan="4" style="text-align: center">Hijo</th>
<tr>
<td><button class="tamB" (click)="suma()">+</button></td>
<td><button class="tamB" (click)="suma()">+</button></td>
<td><button class="tamB" (click)="suma()">+</button></td>
<td><button class="tamB" (click)="suma()">+</button></td>
</tr>
</table>
</div>
Seguidamente, modificamos compo1.component.ts para que el import existente al inicio del fichero contenga lo siguiente:
import { Component, Input, Output, EventEmitter, AfterContentChecked } from '@angular/core';
También modificaremos la clase Compo1Comonent con el siguiente contenido:
export class Compo1Component {
@Input()
valor1: string;
@Input()
valor2: string;
aux1: number;
aux2: number;
@Output()
envRes: EventEmitter<number> = new EventEmitter<number>();
ngAfterContentChecked() {
this.aux1 = parseFloat(this.valor1);
this.aux2 = parseFloat(this.valor2);
}
suma() {
this.envRes.emit(this.aux1 + this.aux2);
}
resta() {
this.envRes.emit(this.aux1 - this.aux2);
}
multiplica() {
this.envRes.emit(this.aux1 * this.aux2);
}
divide() {
this.envRes.emit(this.aux1 / this.aux2);
}
}
Por último, modificaremos el archivo styles.css con lo siguiente:
div {
width: 250px;
padding: 20px;
display: block;
text-align: center;
}
.padre {
background: #abe4b8;
}
.hijo {
background: #5af0f0;
}
.tamB {
height: 53px;
width: 53px;
font-size: 20px;
}
Un ejemplo sencillo de como es la comunicación entre componentes en Angular y utilizando TypeScript, por supuesto.
No hay comentarios:
Publicar un comentario