CODEWITHSUNDEEP
angular
Walter White
Walter White

Reputation: 1026

More than event trigger same method

<div class="someClass" (mouseout, mouseover)="someMethod()"></div>

when i use this syntax i have error 

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '(mouseout,' is not a valid attribute name.

but when split this event in that way, works fine

<div class="someClass" (mouseout)="someMethod()" (mouseover)="someMethod()"</div>

How to shorten syntax without having error?

Upvotes: 1

Views: 43

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

Well, technically, you could create a directive with a @HostListener on the mouseover and mouseout events.

And then expose an @Output property from it to call your Component function.

Something like this:

Directive:

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

@Directive({
  selector: '[appListener]'
})
export class ListenerDirective {

  @Output() appListener: EventEmitter<any> = new EventEmitter();

  constructor() { }

  @HostListener('mouseover')
  onMouseOver(event) {
    this.appListener.emit(event);
  }

  @HostListener('mouseout')
  onMouseOut(event) {
    this.appListener.emit(event);
  }

}

And your Component Template:

<div (appListener)="someFunction($event)">
  Here is some text in the DIV
</div >

Here's a Working Sample StackBlitz for your ref.

Upvotes: 1

Related Questions