refactor: change renderer.addClass to HostBinding

Author: xidedix

projects/coreui/angular/src/lib/aside/app-aside.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';
+import {Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 import { asideMenuCssClasses } from '../shared';
@@ -14,13 +14,12 @@ export class AppAsideComponent implements OnInit, OnDestroy {
 
   private readonly fixedClass = 'aside-menu-fixed';
 
+  @HostBinding('class.aside-menu') _aside = true;
+
   constructor(
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'aside-menu');
-  }
+  ) { }
 
   ngOnInit(): void {
     this.isFixed(this.fixed);

projects/coreui/angular/src/lib/footer/app-footer.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {Component, HostBinding, Inject, Input, OnDestroy, OnInit, Renderer2} from '@angular/core';
 import {DOCUMENT} from '@angular/common';
 
 @Component({
@@ -10,13 +10,12 @@ export class AppFooterComponent implements OnInit, OnDestroy {
 
   private readonly fixedClass = 'footer-fixed';
 
+  @HostBinding('class.app-footer') _footer = true;
+
   constructor(
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'app-footer');
-  }
+  ) { }
 
   ngOnInit(): void {
     this.isFixed(this.fixed);

projects/coreui/angular/src/lib/header/app-header.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, Input, OnInit, OnDestroy, Inject, Renderer2} from '@angular/core';
+import {Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding} from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 
 @Component({
@@ -23,6 +23,10 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   @Input() mobileAsideMenuToggler: boolean;
 
   private readonly fixedClass = 'header-fixed';
+
+  @HostBinding('class.app-header') _header = true;
+  @HostBinding('class.navbar') _navbar = true;
+
   navbarBrandImg: boolean;
 
   private readonly breakpoints = ['xl', 'lg', 'md', 'sm', 'xs'];
@@ -34,11 +38,7 @@ export class AppHeaderComponent implements OnInit, OnDestroy {
   constructor(
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'app-header');
-    renderer.addClass(hostElement.nativeElement, 'navbar');
-  }
+  ) { }
 
   ngOnInit(): void {
     this.isFixed(this.fixed);

projects/coreui/angular/src/lib/sidebar/app-sidebar-footer.component.ts

@@ -1,17 +1,12 @@
-import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';
+import {Component, HostBinding} from '@angular/core';
 
 @Component({
   selector: 'app-sidebar-footer, cui-sidebar-footer',
   template: `<ng-content></ng-content>`
 })
-export class AppSidebarFooterComponent implements OnInit {
+export class AppSidebarFooterComponent {
 
-  constructor(
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'app-sidebar-footer');
-  }
+  @HostBinding('class.sidebar-footer') _sidebarFooter = true;
 
-  ngOnInit() { }
+  constructor() { }
 }

projects/coreui/angular/src/lib/sidebar/app-sidebar-form.component.ts

@@ -1,16 +1,12 @@
-import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';
+import {Component, HostBinding} from '@angular/core';
 
 @Component({
   selector: 'app-sidebar-form, cui-sidebar-form',
   template: `<ng-content></ng-content>`
 })
-export class AppSidebarFormComponent implements OnInit {
+export class AppSidebarFormComponent {
 
-  constructor(
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'sidebar-form');
-  }
-  ngOnInit() { }
+  @HostBinding('class.sidebar-form') _sidebarForm = true;
+
+  constructor() { }
 }

projects/coreui/angular/src/lib/sidebar/app-sidebar-header.component.ts

@@ -1,17 +1,12 @@
-import {Component, ElementRef, OnInit, Renderer2} from '@angular/core';
+import {Component, HostBinding} from '@angular/core';
 
 @Component({
   selector: 'app-sidebar-header, cui-sidebar-header',
   template: `<ng-content></ng-content>`
 })
-export class AppSidebarHeaderComponent implements OnInit {
+export class AppSidebarHeaderComponent {
 
-  constructor(
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'sidebar-header');
-  }
+  @HostBinding('class.sidebar-header') _sidebarHeader = true;
 
-  ngOnInit() { }
+  constructor() { }
 }

projects/coreui/angular/src/lib/sidebar/app-sidebar-minimizer.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostBinding, HostListener, Optional } from '@angular/core';
+import {Component, HostBinding, HostListener, Input} from '@angular/core';
 
 import { AppSidebarService } from './app-sidebar.service';
 
@@ -8,7 +8,7 @@ import { AppSidebarService } from './app-sidebar.service';
 })
 export class AppSidebarMinimizerComponent {
 
-  @HostBinding('attr.role') role = 'button';
+  @HostBinding('attr.role') @Input() role = 'button';
   @HostBinding('class.sidebar-minimizer') _minimizer = true;
 
   @HostListener('click', ['$event'])

projects/coreui/angular/src/lib/sidebar/app-sidebar-nav.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, Input, OnChanges, Renderer2, SimpleChanges } from '@angular/core';
+import { Component, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
 
 import { INavData } from './app-sidebar-nav';
@@ -10,17 +10,14 @@ import { INavData } from './app-sidebar-nav';
 export class AppSidebarNavComponent implements OnChanges {
   @Input() navItems: INavData[] = [];
 
-  @HostBinding('attr.role') role = 'nav';
+  @HostBinding('class.sidebar-nav') _sidebarBav = true;
+  @HostBinding('attr.role') @Input() role = 'nav';
 
   public navItemsArray: INavData[] = [];
 
   constructor(
     public router: Router,
-    private renderer: Renderer2,
-    private hostElement: ElementRef
-  ) {
-    renderer.addClass(hostElement.nativeElement, 'sidebar-nav');
-  }
+  ) { }
 
   public ngOnChanges(changes: SimpleChanges): void {
     this.navItemsArray = Array.isArray(this.navItems) ? this.navItems.slice() : [];

projects/coreui/angular/src/lib/sidebar/app-sidebar.component.ts

@@ -45,8 +45,7 @@ export class AppSidebarComponent implements OnInit, OnDestroy {
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
     private sidebarService: AppSidebarService
-  ) {
-  }
+  ) { }
 
   ngOnInit(): void {
     this.displayBreakpoint(this.display);