task#02 mouse cursor position

Output mouse cursor position

(coordinates, type, ctrl, shift)

1. Create a MouseEventDisplay component with ng(-cli)
2. Use the new component in the MouseEventDisplayComponent view (refresh the project-view in the IDE)
3. In the css-file create a box with a border, fixed height and width
4. In the .html-file listen for mousemove events and call a method coordinates($event)on your component class to update your variables. Listen also to the events on-mouseenter, on-mouseleave, on-click, on-dblclick and on-contextmenu and call a method onEvent($event). You can use on-contextmenu="onEvent($event)" or (contextmenu)="onEvent($event)"
5. In the ts-file write a method coordinates() to update the variables clientX and clientY
6. In the .html-file show the cursor Position, event type, ctrl and shift

Result

Compile and start the application with

ng serve

Open project in browser

• Open your browser with the address http://localhost:4200/
• In the browser window shall appear:
  app works!
auction-list works!

Here is the output from this component. Move the pointer around the inner box and click, double click and right click on the mouse whilst holding down the shift, ctrl or command key.

Hints

• ng generate component mouse-event-display
• in file auction-list-component.component.html add <app-mouse-event-display></app-mouse-event-display>

Folder structure

After generation of the new component mouse-event-Display you should see the folowing Folder and file structure:

src
\- main.ts
\- app
   \- auction-list
      \- auction-list.component.scss
      \- auction-list.component.html
      \- auction-list.component.ts
      \- auction-list.component spec.ts
   \- mouse-event-display
      \- mouse-event-display.component.scss
      \- mouse-event-display.component.html
      \- mouse-event-display.component.ts
      \- mouse-event-display.component spec.ts
   \- app.module.ts
   \- app.component.ts
   \- index.html
   ...

The style file mouse-event-display.component.css

The style file mouse-event-display.component.scss contains the Definition for the box and the type and title styles

.box {
  width:300px;
  height:200px;
  border: 1px solid LightGray;
  padding: 10px;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
  font-size: 14px;
}
.type {
  font-size: 24px;
}

.title {
  font-size: 30px;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

The HTML file mouse-event-display.component.html

We handle DOM events using parentheses and template statements.

When an event in parentheses on the left of the equals is detected, the template statement in quotes on the right of the equals is executed. Alternatively, we can use the canonical form by prefixing the event name with on-. These three bindings are equivalent to (click), (dblclick) and (contextment).

The string in quotes is a template statement. Template statements respond to an event by executing some JavaScript-like code. Here we simply call methods on the component class and pass in the $event object.

The built-in $event object is automatically set to the target event, which in this case is of type MouseEvent. We can use this object to access X and Y coordinates, or any keys that were pressed at the time the mouse event was triggered.

<h1 class="title">Mouse Events</h1>

<div class="box"
     (mouseenter)="onEvent($event)"
     (mouseleave)="onEvent($event)"
     (mousemove)="coordinates($event)"
     (click)="onEvent($event)"
     (dblclick)="onEvent($event)"
     on-contextmenu="onEvent($event)">
     <!-- (event)="" or  on-event="" -->

  <p class="type">Type: {{event?.type}}</p>
  <p>x: {{clientX}}, y: {{clientY}}</p>
  <p>ctrl: {{event?.ctrlKey}}, shift: {{event?.shiftKey}}, meta: {{event?.metaKey}}</p>
</div>

The class file mouse-event-display.component.ts

The class file contains the two methods onEvent(event: MouseEvent) and coordinates(event: MouseEvent). The methods update the attributes event, clientX and clientY.

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

@Component({
  selector: 'app-mouse-event-display',
  templateUrl: './mouse-event-display.component.html',
  styleUrls: ['./mouse-event-display.component.scss']
})
export class MouseEventDisplayComponent implements OnInit {

  public event: MouseEvent;
  public clientX = 0;
  public clientY = 0;

  constructor() { }

  ngOnInit() {
  }

  public onEvent(event: MouseEvent): void {
    this.event = event;
  }
     
  public coordinates(event: MouseEvent): void {
    this.clientX = event.clientX;
    this.clientY = event.clientY;
  }

}

Content of the file auction-list.component.html

<p>auction-list works!</p>
<app-mouse-event-display></app-mouse-event-display>