how to get html element value using ionic 2
Below my html code
<div class="messagesholder" *ngFor="let chat of chatval | orderby:'[date]'" >
<div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">
<div *ngIf="chat.date" style="text-align: center;" >
<p style="font-size:9px;" id="amount" #amount>{{chat.date | amDateFormat:'LL'}}</p>
<input #myname [ngModel]="range" (ngModelChange)="saverange($event)"/>
<input #myname type="text" value={{chat.date}}>
</div>
</div>
<div class="message" *ngIf="chat.sender == currentuser || chat.receiver == currentuser" [ngClass]="{'me': currentuser == chat.sender}">
<div class='image' *ngIf="chat.path" >
<img *ngIf="chat.path" [src]="chat.path"/><br>
<span *ngIf="chat.path_text">{{chat.path_text}}</span>
<span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
</div>
<div *ngIf="chat.message_text">
<span>{{chat.message_text}}</span>
<span style="font-size:9px;">{{chat.date | amDateFormat:'hh:mmA'}}</span>
</div>
</div>
Below my ts file
import { Component,Inject,ViewChild,ElementRef,AfterViewInit} from '@angular/core';
export class ChatPage implements AfterViewInit {
@ViewChild('myname') input:ElementRef;
constructor(public modalCtrl: ModalController,public navCtrl: NavController) {}
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
}
Same date values are repeated.I want same date values are not repeated.
Because I will check two variable.
so I need chat.date value.because i binded the value of input.But i cannot get the value of input element.
i am getting this error
Cannot read property 'nativeElement' of undefined
How to fix this issue.or any other way to find slutions.
Thanks
I created a plnkr link: https://plnkr.co/edit/49TEP8lB4lNJEKsy3IDq?p=preview
It works for me so probably you may want to create your own plnkr so ppl can help
export class ApiDemoApp{
root = ApiDemoPage;
@ViewChild('myname') input:ElementRef;
constructor() {
}
ngAfterViewInit() {
console.log(this.input.nativeElement.value);
}
}
Use this code
@ViewChild('myname') input:any;
ngAfterViewInit() {
console.log(this.input.nativeElement.value) ;
}
If you using Directive Try this way:
private el: HTMLInputElement;
constructor(private _elementRef: ElementRef) {
this.el = this._elementRef.nativeElement;
}
ngOnInit(): void {
console.log(this.el.value);
}