why console.log($event) firing after click and keyup (in angular 6) events show only "is trusted" property?

Question

I'm using Angular 6, and I try to fire click and keyup events. I want to see all the components of the events, so I can choose what values or methods of the object to use.

I built a very simple testing template like this:

import { Component } from '@angular/core';

@Component({
  selector: 'app-try-ing',
  templateUrl: `

  <button type="" (click)="clickMethod($event)">click here</button>

  <input type="text" (keyup)="inputChange($event)">
  `,
  styleUrls: ['./try-ing.component.css']
})
export class TryIngComponent{
  clickMethod(event){
    console.log(`click event: ${event}`);
    console.log(`click event: ${JSON.stringify(event) }`);
  }

  inputChange(event){
    console.log(`input event: ${event}`);
    console.log(`input event: ${JSON.stringify(event) }`);
  }

  constructor() { }
  ngOnInit()  {}
}

After I clicked and filled the input, the console (in chrome) shows:

click event: [object MouseEvent]
click event: {"isTrusted":true}
input event: [object KeyboardEvent]
input event: {"isTrusted":true}

I know from MDN that this event object has a lot more properties than "is trusted" alone, as can be seen in this pages:

mouse event MDN

keyboard event MDN

So my questions are:

1. Why the console doesn't show the whole object?

2. How can I see all the object? this will be very helpful when I use the 'change' event or similar events, when I need to track previous values, etc.

Answer 1

you should try console.log(event);