Custom event using @Input and @Output

Question

Trying to get my head around @Input and @Output and was hoping for an indications as to how my approach is wrong.

In the app.component PARENT COMPONENT I have the following

@Output() dateChanged = new EventEmitter();
dateSelected:any;

onDateSelected() {
   this.dateSelected = this.yearValue + "|" + this.monthValue;
   console.log(this.dateSelected);//is selected and prints out to console
   this.dateChanged.emit(this.dateSelected);
}

this is the html

<div>
 <!--app.component.html-->

      <app-expenses (dateChanged)="onDateSelected($event)"></app-expenses>
</div>

CHILD COMPONENT In the child(ExpensesComponent ) component is as follow

 @Input() dateChanged: any;

 onDateSelected(e) {
   console.log(e);//doesnt reach this point
 }

onDateSelected doesn't fire of What would be a good way of passing this date value to the child?

Thanks

It's not clear from your code what is parent and what is child. To me it looks like <app-expense> might be child and <app-component> might be parent but then your question doesn't make sense. If the child emits the event why would you want onDateSelected be called on the child when the event is received. — Günter Zöchbauer
– Günter Zöchbauer, Commented Dec 21, 2016 at 8:48

Günter Zöchbauer · Accepted Answer · 2016-12-21 08:50:35Z

1

@Output() events are for parents to listen for events of child components, not the other way around.

For parent to child communication you can use data binding.

<app-expenses [selectedDateInChild]="selectedDateOfParent"></app-expenses>

answered Dec 21, 2016 at 8:50

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arianule Over a year ago

Cool thanks. is it possible to call a function in the child component from the parent that passes the date as a value?

Günter Zöchbauer Over a year ago

You can make selectedDateInChild a setter then the code in the setter gets executed every time selectedDateOfParent changes

Collectives™ on Stack Overflow

Custom event using @Input and @Output

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related