{"flag":true,"single":true,"pageTitle":"@HostBinding in Angular | Directives | Angular 15+","post":{"id":70,"user_id":"1","slug":"-hostbinding-in-angular-directives-angular-15--kjgv","title":"@HostBinding in Angular | Directives | Angular 15+","body":"

The @HostBinding decorator binds a host element property to a variable in a directive or a component.<\/p>\r\n

    \r\n
  1. goto app\\custom_directives run terminal and below command<\/li>\r\n<\/ol>\r\n
    ng generate directive betterhighlight<\/code><\/pre>\r\n
    open file app\\custom_directives\\betterhighlight.directive.ts<\/strong><\/p>\r\n
    import { Directive, ElementRef, Renderer2,HostBinding } from '@angular\/core';\r\n@Directive({\r\n  selector: '[appBetterhighlight]'\r\n})\r\nexport class BetterhighlightDirective {\r\n\r\n  constructor(private element: ElementRef,private render: Renderer2) { }\r\n  @HostBinding('style.backgroundColor') background:string = 'yellow';\r\n}\r\n<\/code><\/pre>\r\n
    In view<\/p>\r\n
    <divappOnhoverColorWhite>\r\n  This is a cool\r\n<\/div><\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-28T06:10:30.000000Z","updated_at":"2023-03-28T06:10:30.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 @HostBinding decorator binds a host element property to a variable in a directive or a component.  goto app\\custom_directives run termin - @HostBinding in Angular | Directives | Angular 15+ (Updated: March 28, 2023) - Read more about @HostBinding in Angular | Directives | Angular 15+ at my programming site [SITE]","categories":[]}