fix(core): fixing HostBinding

Consider preferring the @HostListener and @HostBinding to the host property of the @directive and @component decorators.
andreasonny83 · May 28, 2017 · ce84bcb · ce84bcb
1 parent da0575d
commit ce84bcb
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/src/app/board-page/board-page.component.ts b/src/app/board-page/board-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 import { Location } from '@angular/common';
 import { ActivatedRoute, Params } from '@angular/router';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@@ -32,9 +32,10 @@ interface IBoardObj {
   templateUrl: './board-page.component.html',
   styleUrls: ['./board-page.component.scss'],
   animations: [slideToLeft],
-  host: {'[@routerTransition]': ''},
 })
 export class BoardPageComponent implements OnInit {
+  @HostBinding('@routerTransition') routerTransition = '';
+
   public boardID: string;
   public boardName: string;
   public board: FirebaseListObservable<any[]>;

diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 import { FormGroup, FormControl, FormBuilder, Validators, AbstractControl } from '@angular/forms';
 import { slideToLeft } from '../app.animations';
 import { FirebaseService } from '../../firebase';
@@ -11,9 +11,10 @@ import { Observable } from 'rxjs/Observable';
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css'],
   animations: [ slideToLeft ],
-  host: {'[@routerTransition]': ''},
 })
 export class DashboardComponent implements OnInit {
+  @HostBinding('@routerTransition') routerTransition = '';
+
   public boards: Observable<any>;
   public user: Observable<any>;
   public newBoardForm: FormGroup;

diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
 import {
   FormGroup,
   FormControl,
@@ -17,9 +17,10 @@ import { DialogResetEmailComponent } from './dialog-reset-email';
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
   animations: [slideToLeft],
-  host: {'[@routerTransition]': ''},
 })
 export class LoginComponent implements OnInit {
+  @HostBinding('@routerTransition') routerTransition = '';
+
   public loginForm: FormGroup;
   public registerForm: FormGroup;
   public loginLoading: boolean;