Javascript to Angular 2 : document.querySelector('el').emit('em') to @viewChild

Issue

How to convert

HTML

<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
  <a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>

JS

document.querySelector('#fading-cube').emit('fade');

This is my code in Angular 2 that is not working.

@ViewChild('fading-cube') fadingCubeInput: any;

fadecube(){    

this.renderer.setProperty(this.fadingCubeInput.nativeElement,'emit',"fade")
}

Solution

To access your element with @ViewChild(), you can assign a template reference variable to it:

<a-entity #fadingCube ... >

Then you can use that template variable name in code:

@ViewChild('fadingCube') fadingCubeInput: ElementRef;

You should be able to call emit('fade') after casting the HTMLElement as any:

(this.fadingCubeInput.nativeElement as any).emit('fade');

Answered By – ConnorsFan

Answer Checked By – Timothy Miller (AngularFixing Admin)