EventEmitter doesn't seem to send value to parent

CRS01 0
Viewed 26

I have the following my my child.component.ts:

@Output()
  dateEvent = new EventEmitter<string>();
      
  getCoursesWkYr() {
    this.dateEvent.emit("Hi");
    console.log('Method in child called!');
}

My child.component.html:

<form 
  id="coursesByWeekYear"
  [formGroup]="getCoursesByWeekYearForm"
  (ngSubmit)="getCoursesWkYr()">
    <label for="input-week">Week: </label>
    <input id="input-week" type="number" formControlName="chosenWeek">
    <label for="input-year">Year:</label>
    <input id="input-year" type="number"  formControlName="chosenYear">
  <button [disabled]="getCoursesByWeekYearForm.invalid">Show</button>
</form>

My parent.component.html:

<app-courses-by-week-form>
  (dateEvent)="getCoursesWkYr($event)"
</app-courses-by-week-form>

My parent.component.ts:

getCoursesWkYr (value: string) {
  console.log('Method in parent called!')
  console.log('Value', value)
}

The console.log in my parent.component.ts however never gets called...

eventemitter output javascript angular
1 Answers

I forgot to add the (dateEvent) part within the tag of my child component on the html page of the parent page I just noticed. So should have been:

<app-courses-by-week-form
  (dateEvent)="getCoursesWkYr($event)"
  >
CRS010
Related