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.
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.
you can use the ElementRef in conjunction with @ViewChild if you do the following
HTML Markup:
<input type="text" class="form-control" #someNameInput>
<button
class="btn btn-primary"
(click)="clickMe()">Click Me</button>
In the Component Code:
@ViewChild('someNameInput',{static: true}) someNameInput: ElementRef;
For older version it's
@ViewChild('someNameInput') someNameInput: ElementRef;
Right before the constructor() method
And here is how you would use it in a function
clickMe(){
console.log(this.someNameInput.nativeElement.value);
}
If you get some value is undefined, it's usually means that it's a JavaScript issue and you don't have something initialized. Try and take ViewChild out of the equation first and make sure the code works without it first. Then introduce ViewChild into the mix. Kind of like testing your API with postman first then doing the Angular code later. Make sure that backend works first then you know for sure it's the Angular code. Angular has different page life cycles so some values are only available in the onAfterViewInit event and not on other events. So you have to play around with the view cycles. Haven't tried it but I suspect that if you try to get the value of the ViewChild in the ngOnInit method you will get an error or a blank value.
The best lifecycle hook to use is AfterContentInit, allow all of the html content (such as the #map_canvas div) to be found by the scripts.
import { AfterContentInit, ViewChild } from '@angular/core';
Also, some updates have been made to ViewChild, it now takes a 2nd parameter:
@ViewChild('map_canvas', {static: false}) map_canvas: ElementRef;
Now you can use that hook to initialize your map:
ngAfterContentInit() {
this.loadMap();
}