tengo una componente con diferentes modal y en cada modal debo mostrar la informacion de cada inmueble, esta informaciòn esta en otra componente. dicha informaciòn la tengo en un vector de objetos. Por lo que he leido debo usar Binding entre componentes (padre e hijo) la duda que tengo es como es un objeto el que debo pasar a la otra componente para luego mostrar sus datos, como podria hacerlo? debo declarar un objeto tipo @input inmueble y como haria para bindear todo el objeto de una componente a otra? lo que quiero es mostrar luego los valores de ese objeto en la plantilla de esa componente.
Aquì dejo una muestra de lo que tengo:
tengo esta clase que viene siendo el objeto del que hablo:
export class Inmueble {
nombre: string="";
id: string="";
baño: number=0;
estacionamiento: number=0;
metro: number=0;
precio: number=0;
fotos: string[]=[];
}
esa clase la importo en la COMPONENTE1 donde la lleno de datos a traves de una peticion a una API. Lo que quiero es (luego de llenar ese objeto) pasarlo a la COMPONENTE2, lo que esta pensando era hacer esto en COMPONENTE2:
import { Component, OnInit, Input } from '@angular/core';
import { Inmueble } from '../modelos/inmueble';
class {
@Input() vector: inmueble[];
}
Aquì estan los codigos del componente hijo:
import { Component, OnInit, Input} from '@angular/core';
import { Inmueble } from '../modelos/inmueble';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html',
styleUrls: ['./modal.component.css']
})
export class ModalComponent implements OnInit {
@Input() prueba: Inmueble;
constructor() { }
ngOnInit() {
console.log("=============="+this.prueba.nombre);
}
}
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="alert alert-primary text-center" style="width: 100%;" role="alert"> <h1> HOLA {{prueba.nombre}} </h1></div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="d-flex flex-row">
<div class="d-inline-flex" style="width: 100px; height:100px;"> <img src="../assets/images/slider/2.jpg" alt=""> </div>
<div class="d-inline-flex ml-2" style="width: 100px; height:100px;"> <img src="../assets/images/slider/3.jpg" alt=""> </div>
<div class="d-inline-flex ml-2" style="width: 100px; height:100px;"> <img src="../assets/images/slider/4.jpg" alt=""> </div>
</div>
<div class="" id="cont-descripcion">
<p class="text-center">Descripcion</p>
</div>
<table class="table table-borderless">
<tbody>
<tr>
<thead>
<tr>
<th><i class="fas fa-map-marker-alt"></i> Ubicacion: </th>
</tr>
</thead>
</tr>
<tr class="">
<td class="text-center"> <i class="fas fa-bath fa-2x "></i> <p> Baños: 1 <p> </td>
<td class="text-center"> <i class="fas fa-hot-tub fa-2x"></i> <p> Baños de Servicio: 1 <p> </td>
<td class="text-center"> <i class="fas fa-bed fa-2x"></i> <p> Habitaciones: 2 <p> </td>
</tr>
<tr>
<td class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br/>metros construidos: 100</td>
<td class="text-center"> <i class="fas fa-ruler fa-2x "></i> <br/>metros de terreno: 100</td>
<td class="text-center"> <input type="checkbox" value="1" name="chVerTutoriales" onclick="btTutorial.disabled = !this.checked"><br/>Pago Condominio</td>
</tr>
<tr>
<thead>
<tr>
<th>Caractetisticas Adicionales</th>
</tr>
</thead>
</tr>
</tbody>
</table>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
pero como hago para el objeto lleno desde COMPONENTE1 a la COMPONENTE2 ? en los ejemplos veo que lo hacen para una sola variable asì: [variable] = "valor", pero esto seria un vector y piendo que hacerlo linea por linea seria muy inifeciente. lo que quiero lograr con esto es mostrar ese objeto en la plantilla de COMPONENTE2. Gracias a todos de antemano. Saludos!