From d1307b8f5835cd98dc4a53c59f8ae01866e72b22 Mon Sep 17 00:00:00 2001
From: nixa <4dmitr@gmail.com>
Date: Fri, 20 May 2016 20:00:36 +0300
Subject: [PATCH] refactor(components): ViewChild instead of querying dom

---
 .../theme/components/baBackTop/baBackTop.component.ts  | 10 ++++++----
 .../baChartistChart/baChartistChart.component.ts       | 10 +++-------
 .../components/baChartistChart/baChartistChart.html    |  2 +-
 .../baFullCalendar/baFullCalendar.component.ts         |  3 ---
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/app/theme/components/baBackTop/baBackTop.component.ts b/src/app/theme/components/baBackTop/baBackTop.component.ts
index f043ebe8..3832adb7 100644
--- a/src/app/theme/components/baBackTop/baBackTop.component.ts
+++ b/src/app/theme/components/baBackTop/baBackTop.component.ts
@@ -1,10 +1,10 @@
-import {Component, HostListener, Input, ElementRef} from '@angular/core';
+import {Component, ViewChild, HostListener, Input, ElementRef} from '@angular/core';
 
 @Component({
   selector: 'ba-back-top',
   styles: [require('./baBackTop.scss')],
   template: `
-    <i class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i>
+    <i #baBackTop class="fa fa-angle-up back-top ba-back-top" title="Back to Top"></i>
   `
 })
 export class BaBackTop {
@@ -13,7 +13,9 @@ export class BaBackTop {
   @Input() showSpeed:number = 500;
   @Input() moveSpeed:number = 1000;
 
-  constructor (private _elementRef:ElementRef) {
+  @ViewChild('baBackTop') private _selector:ElementRef;
+
+  ngAfterViewInit () {
     this._onWindowScroll();
   }
 
@@ -25,7 +27,7 @@ export class BaBackTop {
 
   @HostListener('window:scroll')
   _onWindowScroll():void {
-    let el = this._elementRef.nativeElement.querySelector('.ba-back-top');
+    let el = this._selector.nativeElement;
     window.scrollY > this.position ? $(el).fadeIn(this.showSpeed) : $(el).fadeOut(this.showSpeed);
   }
 }
diff --git a/src/app/theme/components/baChartistChart/baChartistChart.component.ts b/src/app/theme/components/baChartistChart/baChartistChart.component.ts
index 5492ff85..56d6f0fb 100644
--- a/src/app/theme/components/baChartistChart/baChartistChart.component.ts
+++ b/src/app/theme/components/baChartistChart/baChartistChart.component.ts
@@ -1,4 +1,4 @@
-import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
+import {Component, ViewChild, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
 
 import {Chartist} from './baChartistChart.loader.ts';
 
@@ -18,14 +18,10 @@ export class BaChartistChart {
   @Input() baChartistChartClass:string;
   @Output() onChartReady = new EventEmitter<any>();
 
-  constructor (private _elementRef:ElementRef) {
-  }
+  @ViewChild('baChartistChart') private _selector:ElementRef;
 
   ngAfterViewInit() {
-    let el = this._elementRef.nativeElement.querySelector('.ba-chartist-chart');
-
-    let chart = new Chartist[this.baChartistChartType](el, this.baChartistChartData, this.baChartistChartOptions, this.baChartistChartResponsive);
+    let chart = new Chartist[this.baChartistChartType](this._selector.nativeElement, this.baChartistChartData, this.baChartistChartOptions, this.baChartistChartResponsive);
     this.onChartReady.emit(chart);
   }
-
 }
diff --git a/src/app/theme/components/baChartistChart/baChartistChart.html b/src/app/theme/components/baChartistChart/baChartistChart.html
index 961c75b5..97fd2354 100644
--- a/src/app/theme/components/baChartistChart/baChartistChart.html
+++ b/src/app/theme/components/baChartistChart/baChartistChart.html
@@ -1 +1 @@
-<div class="ba-chartist-chart {{baChartistChartClass || ''}}"></div>
+<div #baChartistChart class="ba-chartist-chart {{baChartistChartClass || ''}}"></div>
diff --git a/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
index 119ca30c..ef1fd623 100644
--- a/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
+++ b/src/app/theme/components/baFullCalendar/baFullCalendar.component.ts
@@ -15,9 +15,6 @@ export class BaFullCalendar {
 
   @ViewChild('baFullCalendar') private _selector:ElementRef;
 
-  constructor () {
-  }
-
   ngAfterViewInit() {
     let calendar = $(this._selector.nativeElement).fullCalendar(this.baFullCalendarConfiguration);
     this.onCalendarReady.emit(calendar);