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'
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.