Component inputs by reference

Question

I'm writing an angular2 component. In this component i have 3 inputs. I paste a variable to each of the inputs. Is it possible to paste inputs by reference?

I want to be able to paste variable to a component and once I change it's value, I want the change to be reflected on the variable outside of that component. Which means passing the variables by reference. Is it possible in angular 2? I know that I can subscribe to events. And fire an event apon change. I'm wondering if there is a simpler solution.

Any information regarding the issue would be greatly appreciated

update

this is the code for the component that I created.

import { Component } from '@angular/core';
import {MdButton} from '@angular2-material/button';
import {ImageRotation} from './image-rotation';
import {FileReaderEvent} from './file-reader-event';
@Component({
selector: 'image-upload',
templateUrl: '/client/imports/components/image-upload/image-upload.html',
directives: [MdButton],
inputs: ['imageUrl','imageFile','imageRotateDegrees']
})
export class ImageUploadComponent {
imageRotationObj:ImageRotation;
imageUrl:string;
imageSrc:any;
imageFile: any;
imageRotateDegrees:number;
imageExifRotation:number;
isImageFileExif:boolean;

imageChanged() {
    var reader = new FileReader();
    reader.onload =  (e:FileReaderEvent)=> {
        var exif = EXIF.readFromBinaryFile(e.target.result);
        switch (exif.Orientation) {
            case 8:
                    this.imageRotateDegrees=-90;
                    this.imageExifRotation=-90;
                    this.isImageFileExif=true;
                this.imageRotationObj.setImageRotation(-90);
                break;
            case 3:
                    this.imageRotateDegrees=180;
                    this.imageExifRotation=180;
                    this.isImageFileExif=true;
                this.imageRotationObj.setImageRotation(180);
                break;
            case 6:
                    this.isImageFileExif=true;
                    this.imageExifRotation=90;
                    this.imageRotateDegrees=90;
                this.imageRotationObj.setImageRotation(90);
                break;
            default:
                    this.isImageFileExif=false;
        }
    };
    var reader2 = new FileReader();
    reader2.onload = (e:FileReaderEvent)=> {
        this.imageSrc=e.target.result;
    }
    reader.readAsArrayBuffer(this.imageFile);
    reader2.readAsDataURL(this.imageFile);
}

constructor() {
    this.imageRotationObj=new ImageRotation();
 }

fileOnChange(event:any) {
    this.imageFile = event.target.files[0];
    this.imageChanged();
}
}

as you can see I defined 3 inputs. now I use that component in the following way:

<image-upload [imageUrl]="imageUrl" [imageFile]="imageFile" [imageRotateDegrees]="imageRotateDegrees"></image-upload>

here I'm passing 3 variables to the component.

and the component understands those variables from the input definition.

now.. what I want is to be able to change the variables inside the component, and that they will be changed outside the component. as I understand the variables are pasted by value and not by reference.

so what do i do?

What do you mean with *paste a variable*? And if you are 'pasting' an object, it 'pastes' a reference. Perhaps some code would help explain what you are trying to ask — Poul Kruijt, May 21 '16 at 11:30
You should look at two way data binding using the `[(input)]` notation. To start with this you should use the `@Input()` annotations on your properties in your class, and not through the `input` property — Poul Kruijt, May 22 '16 at 08:04

Isahiro · Answer 1 · 2016-08-24T15:08:03.713

1

I realize this is a couple months later, but if you still want to do something like this you could use ViewChild from '@angular/core'. ViewChild is a way for the parent component to directly access child variables/functions, so you could create something like this in your parent component:

import [Component, ViewChild, AfterViewInit] from '@angular/core'

export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent
  parentVariable

  ngAfterViewInit() {
    this.childComponent.childVariable = this.parentVariable
  }
}

edited Aug 24 '16 at 15:08

answered Aug 24 '16 at 15:01

Isahiro

165
1
2
11

`ViewChild` won't be initialized when the constructor is executed. You'd need to move the code to `ngAfterViewInit()` (it doesn't look like this answers the question anyway but not sure, didn't dive too deep into the question). – Günter Zöchbauer Aug 24 '16 at 15:03
1

Good point, I'll edit the function to reflect the proper time to call it, my answer was more meant to be a proof of concept anyway – Isahiro Aug 24 '16 at 15:07

score 0 · Answer 2 · answered Feb 28 '18 at 12:28

0

I'm not entirely sure, but isn't two-way data binding what you're looking for?

Take a look at here: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

answered Feb 28 '18 at 12:28

jimas13

597
5
19

Component inputs by reference

update

2 Answers2

Linked