Cannot read property 'native-element' of undefined

Question

I am using ionic 2.

I need to get HTML element value.

Actually, I used viewchild.

Here is my html template code

<div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'; let last = last">        {{last ? callFunction() : ''}}      <div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">          <p class="chat-date"  id="abc" #abc>{{chat.date | amDateFormat:'LL'}}</p>                                {{checkdate()}}                             </div> 

chat.date value is firebase value. I access this element. But I didn't get the value of the element.

Here is my component

import {Component, ElementRef,ViewChild, OnInit} from '@angular/core';      export class ChatPage   {       @ViewChild(Content) content: Content;       @ViewChild('abc')abc: ElementRef;        constructor(){}        ngAfterViewInit(){         console.log("afterinit");        console.log(this.abc.nativeElement.value);        }     } 

I referred this link How can I select an element in a component template?

I tried in many ways.

But I am getting this error

Cannot read property 'nativeElement' of undefined. 

Answer 1

I think you are tring to get the value from html before rendering completely. If you try to print the value in a button click, it will works.

depend on your code I have modified a little.Try the below, it is working for me.

  ngAfterViewInit() {     console.log("afterinit");     setTimeout(() => {       console.log(this.abc.nativeElement.innerText);     }, 1000);   } 

Note: If not working, please increase the timeout time and try again.