{"flag":true,"single":true,"pageTitle":"Custom Attribute Directive like ngIf | Directives | Angular 15+","post":{"id":67,"user_id":"1","slug":"custom-attribute-directive-like-ngif-directives-angular-15--gtye","title":"Custom Attribute Directive like ngIf | Directives | Angular 15+","body":"

Directives are simply an instruction to the DOM.<\/p>\r\n

Directives in Angular:<\/p>\r\n

    \r\n
  1. Component <\/strong>is a directive with a template. ie AppComponent<\/strong><\/li>\r\n
  2. Attribute directive<\/strong> can be used as an attribute to change the behaviour or appearance of anelement, component or other directives. ie ngstyle & ngclass<\/strong><\/li>\r\n
  3. Structural directive<\/strong> controls the DOM element, using which we can add or remove elements from DOM. ie nglf & ngFor<\/strong><\/li>\r\n<\/ol>\r\n

    We will create a custom directive that change Background Color to red<\/p>\r\n

    1.create a class inside app\/custom_directives\/setbackground.directive.ts<\/strong><\/p>\r\n

    import {Directive,ElementRef,OnInit} from \"@angular\/core\";\r\n@Directive(\r\n    {\r\n        selector:'[setBG]'\r\n    }\r\n)\r\nexport class SetBackgroundDirective implements OnInit{\r\n    private element: ElementRef;\r\n    constructor(element: ElementRef){\r\n       this.element = element;\r\n    }\r\n    ngOnInit() {\r\n        this.element.nativeElement.style.backgroundColor=\"red\";\r\n    }\r\n}<\/code><\/pre>\r\n
    2. import and add it in app.module.ts<\/p>\r\n
    import {SetBackgroundDirective} from '.\/custom_directives\/setbackground.directive'\r\n\r\n@NgModule({\r\n  declarations: [\r\n    SetBackgroundDirective\r\n  ]<\/code><\/pre>\r\n
    3. use it in any view as <\/p>\r\n
    <div  setBG>\r\n I Have red background using custom directive.\r\n<\/div><\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-28T05:28:38.000000Z","updated_at":"2023-03-28T05:28:38.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":"Directives are simply an instruction to the DOM. Directives in Angular:  Component is a directive with a template. ie AppComponent Attribute - Custom Attribute Directive like ngIf | Directives | Angular 15+ (Updated: March 28, 2023) - Read more about Custom Attribute Directive like ngIf | Directives | Angular 15+ at my programming site [SITE]","categories":[]}