Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 get Input element value

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

like image 206
Anivaishu Avatar asked Mar 16 '17 05:03

Anivaishu


People also ask

How do you read input values in TypeScript?

To get the value of an input element in TypeScript: Select the input element. Type the input element as HTMLInputElement using a type assertion. Use the value property to get the element's value.


1 Answers

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);
  }
}
like image 154
Hung Cao Avatar answered Oct 05 '22 23:10

Hung Cao