#49 @HostListner in Angular | Creating & Using Custom Directive | A Complete Angular Course

In this lecture you will learn about @HostListner decorator and what is does. The @HostListner decorator allows us to listen to an event on DOM element and react to those events accordingly by executing an event handler method. Let's understand @HostListner decorator with an example.

[abhishekshandilya]

Explaination in such a great detail is very rare on any other place, thankyou for such a nice content.

[olalekanmohammed]

Sire, Your tutorial is the best. Thank you for the good work

[ЕвгенийШаталин-сх]

For everything to work correctly, use “mouseover” instead of “mouseenter”. And instead of "mouseout" use "mouseleave".

[SirFrancisFoley]

The css code you need is:

.highlight-product{
-webkit-box-shadow: 0 0 1px 3px #000 insert;
-moz-box-shadow: 0 0 1px 3px #000 insert;
border: #efefef 2px solid;
box-shadow: 10px 10px 18px
transform: scale(1.05);
}

[SwamyThouta]

I've come across an outstanding Angular tutorial that I believe is the best resource available. Could you please share the complete code for the tutorial, including the eKart project? This would greatly help us practice and enhance our skills. Thank you!

[andinofaturahman]

when to use hostlistener or element events directly ?

[nelsonrivers]

Looks like you misspelled @HostListener in several places while making this video. It should be spelled @HostListener, not @HostListner. You're doing a great job. Keep it up.

[prazzydh]

If mouseout is giving issue, you can use mouseleave which should keep the card hovered until mouse is moved away from the div

[ntsondev]

so I can use host listener mouseenter and mouseout in product.component.ts instead of in highlight directive. Is this right?

[amoghchavan]

can you compare it with js like in js node list we present if we target multole clases here

[vu_nguyendinh]

I have a doubt here:
1. When should we use this decorator @HostListener? Can you show me some real usecases?
2. Why we don't use the Css:hover for the product-item?
/* Using Css: hover */
.estore-product-item:hover {
-webkit-box-shadow: 0 0 1px #000 inset;
-moz-box-shadow: 0 0 1px 3px #000 inset;
border: #efefef 0 0 1px 3px #000 inset;
box-shadow: 10px 10px 18px
transform: scale(1.05);
}

/* Using @HostListener */
.highlight-product {
-webkit-box-shadow: 0 0 1px 3px #000 insert;
-moz-box-shadow: 0 0 1px 3px #000 insert;
border: #efefef 2px solid;
box-shadow: 10px 10px 18px
transform: scale(1.05);
}
Could you explain it for more clearly?
Thank you.

[Moath]

it's clear but what's the main point pf doning that if i can do using css

[SwamyThouta]

I've come across an outstanding Angular tutorial that I believe is the best resource available. Could you please share the complete code for the tutorial, including the eKart project? This would greatly help us practice and enhance our skills. Thank you!

[SwamyThouta]

I've come across an outstanding Angular tutorial that I believe is the best resource available. Could you please share the complete code for the tutorial, including the eKart project? This would greatly help us practice and enhance our skills. Thank you!

[SwamyThouta]

I've come across an outstanding Angular tutorial that I believe is the best resource available. Could you please share the complete code for the tutorial, including the eKart project? This would greatly help us practice and enhance our skills. Thank you!

[SwamyThouta]

I've come across an outstanding Angular tutorial that I believe is the best resource available. Could you please share the complete code for the tutorial, including the eKart project? This would greatly help us practice and enhance our skills. Thank you!