DEV Community

Passing data between nested components with Angular

Stephen Chiang on November 09, 2017

One of the biggest changes from AngularJS to Angular (2+) is the step away from two-way data binding. The problem with two-way data binding is the ...
Collapse
 
danielfrugoni profile image
DanielFrugoni • Edited

Hi ! (having this problem)

export class imageUploadComponent {
@Input() imagen:string;

console.log(this.imagen) = undefined

how can I pass an image as a parameter ?

Collapse
 
chiangs profile image
Stephen Chiang

Hi Daniel without seeing all of your code I'm not exactly sure what you're trying to do. But I'm assuming you are trying to pass the path to the image as a string? Be sure to pass an absolute path rather than relative.

If it's undefined perhaps the variable is not yet defined or the input is not yet provided at the time when the console log is called.

Collapse
 
danielfrugoni profile image
DanielFrugoni

Hi Stephe !

In my form i Hava this:





I use the just to see that the info is there.
then I call <upload-image...., with the parameter that you see.
But when I get into :

@Component({
selector: 'upload-imagen',
templateUrl: './imagen.component.html',
styleUrls: ['./imagen.component.scss'],

})

export class imageUploadComponent {
@Input() imagen: any;
....
and do a console.log(this.imagen) can see :undefined
So I guess Im not passing the parameter ok or Im not using (@Input() imagen: any;) the correct way.

Hope you undertand me and thx for your time

Collapse
 
danielfrugoni profile image
DanielFrugoni

Hi Stephe !

In my form i Hava this:
(use this img temp so just to check my image is there)

I use the just to see that the info is there.
then I call <upload-image...., with the parameter that you see.
But when I get into :

@Component({
selector: 'upload-imagen',
templateUrl: './imagen.component.html',
styleUrls: ['./imagen.component.scss'],

})

export class imageUploadComponent {
@Input() imagen: any;
....
and do a console.log(this.imagen) can see :undefined
So I guess Im not passing the parameter ok or Im not using (@Input() imagen: any;) the correct way.

Hope you undertand me and thx for your time

Thread Thread
 
chiangs profile image
Stephen Chiang

Hi I can't really debug for you from here... But have you imported input?

Thread Thread
 
danielfrugoni profile image
DanielFrugoni

@Component({
selector: 'upload-imagen', ....

and ...
export class imageUploadComponent {
@Input() imagen: any;

Could it be that passing parameter has a size limit ?

Thx

Thread Thread
 
danielfrugoni profile image
DanielFrugoni

yes

Collapse
 
danielfrugoni profile image
DanielFrugoni

Hi

No the path, the image I have in a json file

Thread Thread
 
chiangs profile image
Stephen Chiang

So if you've imported input like this:

import { component, input} from `@angular/core`

What does your HTML markup look like?

Thread Thread
 
danielfrugoni profile image
DanielFrugoni

Since I cant find the solution, Im trying to assign the Image to a global variable and then assign it to a local var

Thread Thread
 
danielfrugoni profile image
DanielFrugoni

Yes
@import() miImage: any;

Thread Thread
 
danielfrugoni profile image
DanielFrugoni

Im trying something differet like this

@Injectable()
export class Globals {
public imagenUno: any;
}

then:
this.globals.imagenUno=data.Imagen;
console.log('Foto:'+this.globals.imagenUno) (I see the image in conole.log)

then I have image.componet.ts
import { Globals } from 'src/app/globals';

constructor(private globals: Globals ) {
console.log('Foto:'+this.globals.imagenUno) (get Foto:undefined)
}

Well I guess Im missing something with angular 7

Collapse
 
reachacsv profile image
reachacsv

I created a dev.to account just to say thank you. Clear and concise to the point - just what I needed!

Collapse
 
beto profile image
beto

Thanks for this great article, but do you have a link to next one of the series? Sharing data between components using a service? Much appreciated, thanks.

Collapse
 
chiangs profile image
Stephen Chiang

Hi Beto, sadly I never got to it...but essentially if the service is provided in root then it is a singleton, meaning you have just one instance of it during it's lifetime.

That means any value you hold in it essentially is available to any component no matter how nested by injecting the service so then you won't find yourself having to continuously pass down the value through a whole tree of components.

I don't recommend exposing or accessing that variable in the service directly. Instead, write a method that accesses it.

Here's the documentation on this: Singleton Services.