CODEWITHSUNDEEP
angularevents
Arianule
Arianule

Reputation: 9043

Custom event using @Input and @Output

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

Upvotes: 3

Views: 115

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657406

@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>

Upvotes: 1

Related Questions