Angular 2 get Input element value

angular 6 get input value
angular 2 get input value onclick
angular set input value
angular input events
angular 6 click event
angular keypress
angular change event
angular input tag

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);
  }
}

Angular2 (JavaScript) - Get the value of an element, You can use two way data binding to access an elements value. In this case i will assume you are trying to access an input's value. you can do  Angular 2 get Input element value. 0; 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


Use this code

@ViewChild('myname') input:any; 

ngAfterViewInit() {
 console.log(this.input.nativeElement.value) ;      
}

User input, You can use Angular event bindings to respond to any DOM event. The code uses the box variable to get the input element's value and display it with In the src/polyfills.ts file, before importing zone.js, import the newly created zone-flags . Angular 2 Input Binding Tutorial. Bind to the following <input> fields with Angular 2 and TypeScript: text, textarea, checkbox, radio and select (drop-down list). Updated Nov 2017, Angular version 5.0. We use two-way data binding with ngModel to bind to the textValue property on the component class.


Your input element depends on the *ngIf condtion.

<div *ngIf="chat.sender == currentuser || chat.receiver == currentuser">
    <div  *ngIf="chat.date" style="text-align: center;" >

           <input #myname [ngModel]="range" (ngModelChange)="saverange($event)"/>
         <input #myname type="text" value={{chat.date}}>
    </div>

ngIf directly manipulates the DOM. If the value is false your html element along with the outer div container gets removed from the DOM. Check here This is why your ViewChild is undefined. You will need to check for the same conditions in your component or reconsider the logic where you are accessing the element in your component. Try this:

ngAfterContentInit() {
    console.log(this.input.nativeElement.value);
    }

Angular 2 Input Binding Tutorial, Bind to the following fields with Angular 2 and TypeScript: text, textarea, checkbox, required> <button (click)="logText(textbox.value)">Update Log</​button> this.list.find((item: any) => item.id === +id).name; this.log += `Value ${​NAME} was  Angular: 4 ways to fetch the value of input in the controller. Angular gives you various ways to fetch data from HTML input in the controller. So here we are going to discuss 4 different ways to do so. Using event Binding (1-way) We can use event binding with HTML input to get data in the controller. There are many events which one can use.


If anyone interested how to check if nativeElement has empty data inside then use textContent property.

Suppose we have following HTML output from nativeElement.outerHTML:

<div _ngcontent-c8="" checkifelementempty="" class="some-class">
  <div _ngcontent-c8="">
     <b><i>&nbsp;a</i></b>
  </div>
</div>

To check if above HTML has empty text use this: !nativeElement.textContent.trim()

Angular: 4 ways to fetch the value of input in the controller , We can use event binding with HTML input to get data in the controller. Let say we want to fetch the value of an input element in the ngModel gives you a 2 ways data binding, which means you can even get the value from  To pass data into an Angular component, we need to be aware of a concept called property binding, which we learned about in the previous article when we bound to an <input> element to display a count. The first step to passing data into an Angular component is to create a custom property to bind to.


Use ngModel.

On the basis of your code I made a small change to use ngModal. see this.

import { Component,Inject,ViewChild,ElementRef,AfterViewInit} from '@angular/core';

export class ChatPage implements AfterViewInit {
  myname: string;
  constructor(public modalCtrl: ModalController,public navCtrl: NavController) {}
   ngAfterViewInit() {
    console.log(this.myname);
    }
  }
<input [(ngModel)]="myname" type="hidden" value="John Doe">

Working with Angular 5 Template Reference Variables, You declare a reference variable by using the hash symbol (#). The #​firstNameInput declares a firstNameInput variable on an <input> element. <input type="text" #  Using TypeScript 2.0.3 Final/RTM, Angular 2.0.0 Final/RTM, and Chrome 53.0.2785.116 m (64-bit). UPDATE for Angular 4+ Renderer has been deprecated in favor of Renderer2, but Renderer2 does not have the invokeElementMethod. You will need to access the DOM directly to set the focus as in input.nativeElement.focus().


Angular 2 - Binding User Input, Angular 2 - Binding User Input - The user can input the text or display the text value when you click on it by using the Angular event binding syntax. selector, locates an element tag named app, and loads the application between those tags​. Angular unit test input value. "@angular/core": "2.0.0" The best way in which to test a function that takes value from HTML input element?


Angular 2 - Data Display, Angular 2 - Data Display - In Angular JS, it very easy to display the value of the properties Let's take an example and understand more about Data Display. Another simple example, which is binding on the fly is the use of the input html tag. Get user input from a template reference variable. There's another way to get the user data: use Angular template reference variables. These variables provide direct access to an element from within the template. To declare a template reference variable, precede an identifier with a hash (or pound) character (#).


Angular 2+: Setting value programatically does not trigger onInput , @ViewChild('ammountRef', { read: ElementRef}) inputElement: any; onSlideClick​(ammt: number) { //set value to form control in order get the  In Angular 2, you can make the use of DOM element structure of HTML to change the values of the elements at run time. Let’s look at some in detail. Once you save all the code changes and refresh the browser, you will get the following output. When you hit the Click Me button, you will get the