{"flag":true,"single":true,"pageTitle":"@HostListner in Angular | Directives | Angular 15+","post":{"id":69,"user_id":"1","slug":"-hostlistner-in-angular-directives-angular-15--iuze","title":"@HostListner in Angular | Directives | Angular 15+","body":"<p>The @HostListner decorator listens to the DOM event on the host element&nbsp;and it reacts to that event by executing an event handler method.<\/p>\r\n<p>Goto app\\custom_directives and open terminal run below command<\/p>\r\n<p>1.<\/p>\r\n<pre class=\"language-markup\"><code>ng generate directive onhoverColorWhite<\/code><\/pre>\r\n<p>2.add cpde inside <strong>onhover-color-white.directive.spec.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>import { Directive, ElementRef, HostListener, Renderer2 } from '@angular\/core';\r\n@Directive({\r\n  selector: '[appOnhoverColorWhite]'\r\n})\r\nexport class OnhoverColorWhiteDirective{\r\n\r\n  constructor(private element: ElementRef,private render: Renderer2) { }\r\n  @HostListener('mouseenter')  mouseover(){\r\n    this.render.setStyle(this.element.nativeElement,'color','white'); \/\/set inline style  \r\n  }\r\n  @HostListener('mouseleave')  mouseout(){\r\n    this.render.setStyle(this.element.nativeElement,'color','black'); \/\/set inline style  \r\n  }\r\n}\r\n<\/code><\/pre>\r\n<p>3. in view<\/p>\r\n<pre class=\"language-markup\"><code>&lt;div appOnhoverColorWhite&gt;\r\n  This is a out!\r\n&lt;\/div&gt;<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-28T06:02:59.000000Z","updated_at":"2023-03-28T06:02:59.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"The @HostListner decorator listens to the DOM event on the host element&nbsp;and it reacts to that event by executing an event handler metho - @HostListner in Angular | Directives | Angular 15+ (Updated: March 28, 2023) - Read more about @HostListner in Angular | Directives | Angular 15+ at my programming site [SITE]","categories":[]}