Ggtcf

Can I cause damage to electrical appliances by unplugging them when they are turned on?

Does the Crossbow Expert feat's extra crossbow attack work with the reaction attack from a Hunter ranger's Giant Killer feature?

Alignment of six matrices

How to leave product feedback on macOS?

What does "Scientists rise up against statistical significance" mean? (Comment in Nature)

Unable to disable Microsoft Store in domain environment

When is "ei" a diphthong?

Grepping string, but include all non-blank lines following each grep match

How would you translate "more" for use as an interface button?

Ways of geometrical multiplication

Mimic lecturing on blackboard, facing audience

Giving feedback to someone without sounding prejudiced

"Oh no!" in Latin

Is there a RAID 0 Equivalent for RAM?

Do people actually use the word "kaputt" in conversation?

If the only attacker is removed from combat, is a creature still counted as having attacked this turn?

How do I Interface a PS/2 Keyboard without Modern Techniques?

Why Shazam when there is already Superman?

Difference between shutdown options

Did I make a mistake by ccing email to boss to others?

Limit max CPU usage SQL SERVER with WSRM

When and why was runway 07/25 at Kai Tak removed?

Is there a distance limit for minecart tracks?

How can I safely use "Thalidomide" in my novel while respecting the trademark?

More than event trigger same method

Inserting Angular 2 [routerLink] attribute to an html anchor in Typescript(Javascript)Dynamically add *ngIf in a directiveAngular Directive with dynamic attributesCan not to create link dynamicallyAdding a ngx-popover directive to a d3 svg element getting Failed to execute 'setAttribute'How to use | translate to ng-treetableAccess current url with the host name in Angular HTMLAngular Router Invalid Character Error-Auxilary RouteFailed to execute 'setAttribute' on 'Element': 'novalidate(ngSubmit)' is not a valid attribute nameAngular Nested FormArray

1

<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?

angular

share|improve this question

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You can't, that syntax is not supported and there is no easy way to shorten it like that. You could do something similar in the component code (type script) where you could register multiple events in a loop but that is a lot more code than what you would write here in the html.
  
  – Igor
  Mar 7 at 22:13
  
  

  
  
  
  

add a comment | 

1

<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?

angular

share|improve this question

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  You can't, that syntax is not supported and there is no easy way to shorten it like that. You could do something similar in the component code (type script) where you could register multiple events in a loop but that is a lot more code than what you would write here in the html.
  
  – Igor
  Mar 7 at 22:13
  
  

  
  
  
  

add a comment | 

<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?

angular

share|improve this question

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

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

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

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

angular

angular

share|improve this question

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

share|improve this question

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

asked Mar 7 at 22:08

Walter WhiteWalter White

396420

1 Answer
1

active

oldest

votes

1

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.

share|improve this answer

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55053594%2fmore-than-event-trigger-same-method%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

1

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.

share|improve this answer

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239

add a comment | 

1

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.

share|improve this answer

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239

add a comment | 

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.

share|improve this answer

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239

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);
 

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

share|improve this answer

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239

answered Mar 7 at 22:27

SiddAjmeraSiddAjmera

15.8k31239