fixed #2

shivarajnaidu · Nov 26, 2019 · 62c60b7 · 62c60b7
1 parent 5d62f8f
commit 62c60b7
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/projects/ng-marquee/src/lib/ng-marquee/ng-marquee.component.html b/projects/ng-marquee/src/lib/ng-marquee/ng-marquee.component.html
@@ -1,5 +1,5 @@
 <div class="ng-marquee-wrapper">
-  <div>
+  <div #marqueeContainer>
       <ng-content></ng-content>
   </div>
 </div>
diff --git a/projects/ng-marquee/src/lib/ng-marquee/ng-marquee.component.ts b/projects/ng-marquee/src/lib/ng-marquee/ng-marquee.component.ts
@@ -1,28 +1,31 @@
-import { Component, OnInit, ChangeDetectionStrategy, Input } from '@angular/core';
+import { Component, OnInit, ChangeDetectionStrategy, Input, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'ng-marquee',
   templateUrl: './ng-marquee.component.html',
   styleUrls: ['./ng-marquee.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class NgMarqueeComponent implements OnInit {
+export class NgMarqueeComponent implements OnInit, AfterViewInit {
 
   @Input() duration: string | number;
-  animationElem: HTMLDivElement;
+  @ViewChild('marqueeContainer', { static: true }) animationElem: ElementRef<HTMLDivElement>;
 
   constructor(
   ) { }
 
-  updateDuration() {
+  private updateDuration() {
     if (!this.duration) {
       return;
     }
-    this.animationElem.style.animationDuration = `${this.duration}s`;
+
+    this.animationElem.nativeElement.style.animationDuration = `${this.duration}s`;
   }
 
   ngOnInit() {
-    this.animationElem = document.querySelectorAll('.ng-marquee-wrapper > div')[0] as HTMLDivElement;
+  }
+
+  ngAfterViewInit() {
     this.updateDuration();
   }