Get Value from a Input field Angular With Code

Question

I want to take values from input to a function to alert here is my html

<div class="container p-5 ">
  <input #titleInput *ngIf="isClicked"  type="text"  class="col-4"><br>
  <button (click)="OnClick()" class="btn btn-primary col-2 ">
    Show 
  </button>
  <button (click)="Send(titleInput.value)" class="btn btn-success col-2 m-3">
    Send
  </button>
</div>

and here is my componet.ts

import { Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

Send(data: any) {
  alert(data)

}

OnClick() {
  this.isClicked=true;
}
  title = 'demoproject1';
  isClicked=false;
}

I want to get value from input field and I want get value into components function

user20291198 · Accepted Answer · 2022-12-09 09:32:11Z

1

Create Variable to store input value:
component.ts

...
export class AppComponent {
input: string;
...

Add FormsModule to your module.ts if not already imported
module.ts

import { FormsModule } from '@angular/forms';

setup ngModel on your HTML:
html:

<input type="text" [(ngModel)]="input" ></-input>

Important: Dont forget to add a Route to the component in your app-routing.module.ts

ngModel Docs

answered Dec 9, 2022 at 9:32

user20291198

Sign up to request clarification or add additional context in comments.

Comments

Chady BAGHDADI · Accepted Answer · 2022-12-09 10:13:40Z

0

@ViewChild('titleInput') titleInput: 
ElementRef;

ngAfterViewInit() {
  // Put your logic here ...
}

i put the code here : https://stackblitz.com/edit/angular-ivy-b4hcqw?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html

edited Dec 9, 2022 at 10:13

answered Dec 9, 2022 at 9:35

Chady BAGHDADI

3132 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get Value from a Input field Angular With Code

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related