1

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")
}
KitCat
  • 243
  • 3
  • 12

1 Answers1

1

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');
ConnorsFan
  • 70,558
  • 13
  • 122
  • 146
  • I did make the change for the ID previously. It's the ".emit" that is giving me trouble. I cannot seem to emit from the nativeElement – KitCat Dec 10 '17 at 01:48
  • You can try calling `emit` as shown in my updated answer. – ConnorsFan Dec 10 '17 at 02:44
  • 1
    Thank you very much! :) I got it working and my code now looks like this. `this.fadingCubeInput.nativeElement.emit('fade') ` – KitCat Dec 10 '17 at 19:56