Angular - Logging eventemitter.emit logs 'undefined'-CodePudding

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 >
    <input 
           inputmode="numeric"
           [appRegexMask]="hoursRegEx"
           placeholder="0"
           (blur)="hoursInputBlur($event.target.value)"
           [value]="hours">
    <span >{{hours | plural : ('time.hour' | translate) : ('time.hours' |
        translate)}}</span>
    <input 
           inputmode="numeric"
           [appRegexMask]="minutesRegEx"
           placeholder="0"
           (blur)="minutesInputBlur($event.target.value)"
           [value]="minutes">
    <span >{{'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?

CodePudding user response：

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>

CodePudding user response：

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.