Property 'nativeElement' does not exist on type '() => void' in Angular2+

Question

I want to trigger a click event even without clicking on the button. So I followed the structure mentioned in the post - angular2 manually firing click event on particular element

However, I am getting an error:

Property 'nativeElement' does not exist on type '() => void'

for which I find no relevant reference in the web.

I want to trigger the showAccurateGraphs() button on clicking on accurateExtract().

My code is -

app.component.html

<button type="button"   (click)="accurateExtract()" class="btn btn-
dark">Accurate Extract</button>

 <button type="button" #accurateExt (click)="showAccurateGraphs()" 
   class="btn btn-dark">Show Accurate API Graph</button>

app.component.ts

   import { Component, OnInit } from '@angular/core';

   import {  ViewChild, ElementRef, Renderer } from '@angular/core'


   constructor(private renderer:Renderer ) {}

   @ViewChild('accurateExt') accurateExt: ElementRef;


   accurateExtract(){


    let event = new MouseEvent('click', {bubbles: true});
    this.renderer.invokeElementMethod(
    this.accurateExtract.nativeElement,'dispatchEvent', [event]);

     }

Check that post SO answer you referred. It says instead of invokeElementMethod() use dispatchEvent() method. Also use Renderer2. Renderer is deprecated AFAIK. — emkay, Feb 27 '19 at 05:55
Possible duplicate of [angular2 manually firing click event on particular element](https://stackoverflow.com/questions/36639486/angular2-manually-firing-click-event-on-particular-element) — emkay, Feb 27 '19 at 06:06

Nithya Rajan · Accepted Answer · 2019-02-27T06:25:07.223

0

Change your code as follow, because invokeElementMethod() is no more available in renderer API 2 in angular. there's a spelling mistake in your property, you should change this.accurateExtract to this.accurateExt

 accurateExtract(){
    let event = new MouseEvent('click', {bubbles: true});
    this.accurateExt.nativeElement.dispatchEvent(event);
 }

edited Feb 27 '19 at 06:25

answered Feb 27 '19 at 05:57

Nithya Rajan

4,722
19
30

Thanks Bear . But still i get the error - Property 'nativeElement' does not exist on type '() => void'. – Techdive Feb 27 '19 at 06:16
When will this function gets called? – Nithya Rajan Feb 27 '19 at 06:19
when i click on accurateExtract() button, i would like showAccurateGraphs() to be called. – Techdive Feb 27 '19 at 06:24
I have updated my answer.. `accurateExt` use this property – Nithya Rajan Feb 27 '19 at 06:25
Ok thank you. But i get error - ERROR TypeError: Cannot read property 'nativeElement' of undefined – Techdive Feb 27 '19 at 06:28
Actually, what you want to achieve? – Nithya Rajan Feb 27 '19 at 06:30
I want to automate the showAccurateGraphs() click button. I want that once the accurateExtract() button is clicked, the showAccurateGraphs() button to trigger automatically – Techdive Feb 27 '19 at 06:32
showAccurateGraphs() is this method created inside your component.ts – Nithya Rajan Feb 27 '19 at 06:35
`accurateExtract(){ this.showAccurateGraphs (); }` if the showaccurategraphs methos is in your component.ts you can use this way to trigger the function – Nithya Rajan Feb 27 '19 at 06:37
no actually, this.showAccurateGraphs(), when i call inside accurateExtract() , i get an error - 'hasChildNodes' of null ... it is a javascript graph error , where there is issue with the onload event trigger. I haven't understood it exactly. I have to look deep into it. But i thought maybe triggering the click button may work. – Techdive Feb 27 '19 at 06:40
can you share us the code inside `showAccurateGraphs()` method – Nithya Rajan Feb 27 '19 at 06:42
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/189104/discussion-between-bear-nithi-and-techdive). – Nithya Rajan Feb 27 '19 at 06:42

Property 'nativeElement' does not exist on type '() => void' in Angular2+

1 Answers1