emitting value in Angular, logged as [object Object] rather than value

Question

I've been making some progress with child/parent value passing and I've been following this youtube video (https://www.youtube.com/watch?v=tZNWv-iW74I) and I'm slwoly getting there. At the moment, I can't seem to emit the value as I would like to the parent component, I can only emit the undefined object, any ideas where I'm going wrong? Just need a friendly nudge as I'm learning please.

What I'm trying to do - the slider is moved, then showValue in the stats.component.html is updated with the value the slider is set to.

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],

})

export class AppComponent
{
@Output() slider1Change: EventEmitter<number> = new EventEmitter<number>();

onInputChange(event: any)
{
 console.log("This is emitted as the thumb slides " + event.value);
 this.slider1Change.emit(event.value)
 console.log("This is emitted via @Output " + this.slider1Change);
}
}

export class SliderFormattingExample
{
formatLabel(value: number)
{
  if (value >= 1000) {
    return Math.round(value / 1000) + 'k';
}
 return value;
}
}

The logging looks like this, the second console output is not emitting the value but the object:

This is emitted as the thumb slides 19550

This is emitted via @Output [object Object]

This is emitted as the thumb slides 19622

app.component.html

<h1>Hello app-component.html!</h1>

<h2>Slider Test</h2>
<mat-slider id="slider1" min="18296" max="23456" thumbLabel step="1" value="1" (input)="onInputChange($event)">
</mat-slider> <br />
<mat-slider id="slider2" min="12000" max="14000" thumbLabel step="1" value="1" (input)="onInputChange($event)">
</mat-slider>

<app-stats></app-stats>

stats.component.html

<h1>statsComponent</h1>
<p>{{ showValue }}</p>
<div (notify) = "onValueChanged($event)"></div>

stats.component.ts

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

@Component({
selector: 'app-stats',
templateUrl: './stats.component.html',
styleUrls: ['./stats.component.scss'],

})
export class StatsComponent implements OnInit {

showValue: number = 99999;

onValueChanged(sliderVal: number): void
{
 this.showValue = sliderVal;
}

constructor() { }

ngOnInit(): void {
}

}

This code looks pretty confused. Not sure where notify is coming from or why there’s an event emitter in your app component since app component should be your top level, and thus have nothing to emit to. The logging Is happening that way because you’re logging the event emitter itself, which is an object, and you’re converting it to a string, and an objects default toString method is to output what you’re seeing. — bryan60
– bryan60, Commented Mar 2, 2020 at 14:08
I've done as suggested below and now log this to the console (This is emitted via @Output EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}) At the moment I'm just testing to see if I can get the emitted value in another component and then do some prcoessing on it. It probably does look a bit disjointed as this is just testing the theory and evidencing how it works at this stage. I'm not sure why the value isn't getting into that div :/ — Amble
– Amble, Commented Mar 2, 2020 at 14:19
event emitters go from child to parent, app component is the root component and thus has no parent to receive events, the event emitter should be in a child. notify is an undefined event on a div, so angular has no clue what to do with that. — bryan60
– bryan60, Commented Mar 2, 2020 at 14:50

Z. Bagley · Accepted Answer · 2020-03-02 14:06:35Z

2

The problem is with the console.log(<string> + <object>). This converts your object to a string before it is parsed by console.

In order to log objects you need to use a comma separator: console.log(<string>, <object>).

For your example you would use:

console.log("This is emitted as the thumb slides ", event.value) and console.log("This is emitted via @Output ", this.slider1Change)

answered Mar 2, 2020 at 14:06

Z. Bagley

9,2681 gold badge44 silver badges55 bronze badges

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

Comments

Frederick · Accepted Answer · 2020-03-02 14:06:00Z

2

do console.log("This is emitted via @Output:", this.slider1Change);

answered Mar 2, 2020 at 14:06

Frederick

8926 silver badges14 bronze badges

Collectives™ on Stack Overflow

emitting value in Angular, logged as [object Object] rather than value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related