Angular - Logging eventemitter.emit logs 'undefined'

Question

I'm trying to emit a number value from a component. I'm logging the value before it's emitted, and it has the correct value.

The parent component where im refering to my hours and minutes component.

<app-hours-and-minutes-selector [(hours)]="model.overTimeHours"
                                            [(minutes)]="model.overTimeMinutes"></app-hours-and-minutes-selector>

model.overTimeHours and model.overTimeMinutes is numbers

hours and minutes component

<div class="hours-and-minutes-inputs">
    <input class="hours-input header-1"
           inputmode="numeric"
           [appRegexMask]="hoursRegEx"
           placeholder="0"
           (blur)="hoursInputBlur($event.target.value)"
           [value]="hours">
    <span class="big-copy">{{hours | plural : ('time.hour' | translate) : ('time.hours' |
        translate)}}</span>
    <input class="minutes-input header-1"
           inputmode="numeric"
           [appRegexMask]="minutesRegEx"
           placeholder="0"
           (blur)="minutesInputBlur($event.target.value)"
           [value]="minutes">
    <span class="big-copy">{{'shared.minutes-short' | translate}}</span>
</div>

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
    selector: 'app-hours-and-minutes-selector',
    templateUrl: './hours-and-minutes-selector.component.html',
    styleUrls: ['./hours-and-minutes-selector.component.scss']
})
export class HoursAndMinutesSelectorComponent {

    public hoursRegEx = '^[0-9]{0,3}$';
    public minutesRegEx = '^([0-9]|[0-5][0-9])$';
    @Input() public hours: number;
    @Input() public minutes: number;
    @Output() public hoursTyped: EventEmitter<number>;
    @Output() public minutesTyped: EventEmitter<number>;

    constructor() {
        this.hoursTyped = new EventEmitter();
        this.minutesTyped = new EventEmitter();
    }

    public hoursInputBlur(hours: number): void {
        this.hours = hours;
        this.hoursTyped.emit(this.hours);
        // logs undefined
        console.log(this.hoursTyped.emit(hours));

    }
    public minutesInputBlur(minutes: number): void {
        this.minutes = minutes;
        this.minutesTyped.emit(this.minutes);

    }

}

I've tried to move the initialazation to where i declare the eventemitter without any difference.

Can someone please tell me where i'm wrong?

Answer 1

For sharing data between parent and child component, we only require square brackets. So it should be:

<app-hours-and-minutes-selector [hours]="model.overTimeHours" [minutes]="model.overTimeMinutes"></app-hours-and-minutes-selector>

Answer 2

if you want to receive a value from your event emitter you have to use event binding (use only parenthesis) because your emitter is an event on your HoursAndMinutesSelectorComponent and not a number, also on the Parent component you have to define a function that will receive a value from the emitter and set in your variable and finally the event that will emit the component should be called equal your emitter, example:

Html:

<app-hours-and-minutes-selector (hoursTyped)="onAsignHours($event)"
                                                (minutesTyped)="onAsignNumber($event)"></app-hours-and-minutes-selector>

TS:

onAsignHours(hours: number){this.model.overTimeHours = hours}

Note that I only use parenthesis and the event name is the same that the emitter (where the value comes), and I define a new function that will call when a new value is emitted and will be responsible to assign the value that comes from emitter to a variable.