Taking two variable from parent component to child component

Question

I am trying to send two variable from child component to the parent component

I have placed the child selector to the parent component view , where I used child tag and bind the @output name myOutput to the getData function in the parent component and passed the event handler to it

<app-form-test [myInput]='myInputString' (myOutput)="getData($event)"></app-form-test>

parent ts file =>

  getData(value) {
    alert(value);
  }

child ts file

export class FormTestComponent implements OnInit {
  @Input() myInput: [];

  @Output() myOutput: EventEmitter<string> = new EventEmitter();
  firstOutputString = 'hello I am coming from child component'
  secondOutputString = " I am second string";

  ngOnInit() {

  }
  SendData() {
    this.myOutput.emit(this.firstOutputString);
  }
 }

Here I want to pass another variable secondOutputString to the parent component from child component I tried to pass it using

SendData() {
        this.myOutput.emit(this.firstOutputString , this.secondOutputString);
      }

But I am getting error

you can emit not only an string else an object like {var1:"hello",var2:"word"} — Eliseo, Sep 20 '18 at 07:35
related to https://stackoverflow.com/questions/41003639/how-pass-2-parameters-to-eventemitter-angular2 — Ivan Blanar, Sep 20 '18 at 07:45

score 0 · Answer 1 · answered Sep 20 '18 at 07:41

in child .ts:

@Output() myOutput: EventEmitter<{firstOutputString: string, secondOutputString: string}> = new EventEmitter();

SendData() {
    this.myOutput.emit({
      firstOutputString: this.firstOutputString,
      secondOutputString: this.secondOutputString
    });
}

and in parent .ts:

getData(value) {
    console.log(value.firstOutputString);
    console.log(value.secondOutputString);
}

Taking two variable from parent component to child component

1 Answers1