{"flag":true,"single":true,"pageTitle":"Renderer2 in Angular | Add custom backgrounds, classes, attributes etc | Directives | Angular 15+","post":{"id":68,"user_id":"1","slug":"renderer2-in-angular-add-custom-backgrounds-classes-attributes-etc-directives-angular-15--isit","title":"Renderer2 in Angular | Add custom backgrounds, classes, attributes etc | Directives | Angular 15+","body":"<ul>\r\n<li>The native element property contains the reference to the underlying DOM object which gives us direct&nbsp;access to the DOM, bypassing the angular. This is not advisable for following reasons:<\/li>\r\n<li>Angular keeps the Component &amp; the view in Sync using Templates, data binding &amp; change detection, etc All of them are bypassed when we update the DOM Directly.<\/li>\r\n<li>DOM Manipulation works only in Browser. You will not able to use the App in other platforms like in a web Worker, in Server or in a Desktop, or in the mobile app, etc. where there is no browser.<\/li>\r\n<li>The DOM APls do not sanitize the data. Hence it is posible to inject a script, thereby, opening our app an easy target for the XSS injection attack.<\/li>\r\n<\/ul>\r\n<p>Move to <strong>app\/custom_directives\/ and open terminal and run command<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>ng generate directive greenbackground<\/code><\/pre>\r\n<p>it will create directive + add it in app.module.ts<\/p>\r\n<p><strong>app\/custom_directives\/greenbackground.directive.ts<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>import { Directive, ElementRef, OnInit, Renderer2 } from '@angular\/core';\r\n@Directive({\r\n  selector: '[appGreenbackground]'\r\n})\r\nexport class GreenbackgroundDirective implements OnInit {\r\n  constructor(private element: ElementRef,private render: Renderer2){ }\r\n  ngOnInit() {\r\n\r\n    \/\/this.render.setStyle(this.element.nativeElement,'backgroundColor','green'); \/\/set inline style\r\n    this.render.addClass(this.element.nativeElement,'backgroundblue'); \/\/add class to element ,\r\n    this.render.setAttribute(this.element.nativeElement,'title','This is better than old code'); \/\/add class to element ,\r\n} }\r\n<\/code><\/pre>\r\n<p>in view:<\/p>\r\n<pre class=\"language-markup\"><code>&lt;div appGreenbackground&gt;\r\n  Its cool\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p>app.module.ts<\/p>\r\n<pre class=\"language-markup\"><code>import { GreenbackgroundDirective } from '.\/custom_directives\/greenbackground.directive'\r\n\r\n@NgModule({\r\n  declarations: [\r\n    GreenbackgroundDirective\r\n  ],<\/code><\/pre>","category_id":"13","is_private":"0","created_at":"2023-03-28T05:49:18.000000Z","updated_at":"2023-03-28T05:49:18.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 native element property contains the reference to the underlying DOM object which gives us direct&nbsp;access to the DOM, bypassing the - Renderer2 in Angular | Add custom backgrounds, classes, attributes etc | Directives | Angular 15+ (Updated: March 28, 2023) - Read more about Renderer2 in Angular | Add custom backgrounds, classes, attributes etc | Directives | Angular 15+ at my programming site [SITE]","categories":[]}