如何将对象从一个组件传递到另一个组件

Question

I have a component with different modal and in each modal I must show the information of each property, this information is in another component. I have that information in a vector of objects. From what I read I must use Binding between components (father and son) the doubt that I have is how is an object that I must pass to the other component and then show their data, how could I do it? I must declare an object type real @input and how would you do to bindear the whole object from one component to another? what I want to do is show the values of that object in the template of that component.

Here is a sample of what I have:

I have this class that has been the object of which I speak:

 export class Inmueble { nombre: string=""; id: string=""; baño: number=0; estacionamiento: number=0; metro: number=0; precio: number=0; fotos: string[]=[]; } 

I import that class into COMPONENT1 where I fill it with data through a request to an API. What I want is (after filling that object) to pass it to the COMPONENT2, what I was thinking was to do this in COMPONENT2:

 import { Component, OnInit, Input } from '@angular/core'; import { Inmueble } from '../modelos/inmueble'; class { @Input vector: inmueble[]; } 

but how do I do for the object filled from COMPONENT1 to COMPONENT2? in the examples I see that they do it for a single variable like this: [variable] = "value", but this would be a vector and I think that doing it line by line would be very unimportant. What I want to achieve with this is to show that object in the COMPONENT2 template. Thanks to everyone beforehand. Regards!

Edit:

Component 1:

 import { Component, OnInit, Input} from '@angular/core'; import { Inmueble } from '../modelos/inmueble'; @Component({ selector: 'app-modal', templateUrl: `<p>Model: {{prueba.nombre}} </p>`, styleUrls: ['./modal.component.css'] }) export class ModalComponent implements OnInit, Input { @Input() prueba: Inmueble; constructor() { } ngOnInit() { } } 

Component 2:

  <app-modal [prueba]="inmuebles[0]" > </app-modal> 

I assign real estate [0] since in this component I have an array of properties, so in theory I would be assigning a property to a property.

is showing me this error:

 ERROR in ./src/app/modal/modal.component.ts Module not found: Error: Can't resolve './<p>Model: {{prueba.nombre}} </p>' in '/home/julian/Seaconfiable/src/app/modal' 

Answer 1

If I have understood it correctly, you need to pass complex data object across components.

You can easily do this using property binding from parent component to child component as an @Input property as

 @Input() vector: inmueble[];

A sample created at https://stackblitz.com/edit/angular-object-passing-between-components