CODEWITHSUNDEEP
javascriptangularinputsubmit
Alexandru-Marian Constantin
Alexandru-Marian Constantin

Reputation: 77

How to console log the text from an input when pressing the button associated with it?

I am new to Angular (it's actually my third day, with some semi-consistent prior JS knowledge) and I'm a little confused about how to console.log the text that the user writes in the input box when pressing the submit button next to it.

I know the answer to this question should be found in any part of the internet, but I didn't find it by googling in multiple ways.

TS part of the component:

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

@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.component.html',
  styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
  onClick(){
    console.log();
  }
}

HTML part of the component:

<div class="first-row">

    <div class="input-button">   

        <mat-form-field class="input">
            <input matInput placeholder="Text">
        </mat-form-field>

        <div class="button" (click)="onClick()">
            <button mat-raised-button class='submit-button'>Submit</button>
        </div>

    </div>

    <div class="input-button">

        <mat-form-field class="input">
            <input matInput placeholder="Text">
        </mat-form-field>

        <div class="button">
            <button mat-raised-button class='submit-button'>Submit</button>
        </div>

    </div>

</div>

CSS part of the component:

.first-row {
    display: flex;
    width: 66%;
    justify-content: space-around;
}

.input-button {
    display: flex;
    width: 45%;
}

.mat-raised-button {
    background-color: #FFC200;
    color: black;
}

.input {
    width: 100%;
}

.button {
    margin-left: 10px;
    padding-bottom: 20px;
    display: flex;
    align-items: center;
}

I managed to get the button to console log anything, but i don't know how to associate it with the text from the input.

Upvotes: 1

Views: 11455

Answers (4)

JsNgian
JsNgian

Reputation: 835

Firstly, it will be better to keep the (click) event in the button element instead of keeping it in the parent div element.

We can do this in many ways. It completely depends on how you want to do it. First you can use a template variable to pass the value of input to the click function.

Component

import { Component } from '@angular/core';
@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.component.html',
  styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
  onClick(value){
    console.log(value);
  }
}

HTML

<mat-form-field class="input">
  <input matInput placeholder="Text" #inputText>
</mat-form-field>
<div class="button" (click)="onClick(inputText.value)">
  <button mat-raised-button class='submit-button'>Submit</button>
</div>

Second way is to use ViewChild and ElementRef from angular/core

import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
   selector: 'app-input-boxes',
   templateUrl: './input-boxes.component.html',
   styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
     @ViewChild("inputText")input: ElementRef
     onClick(){
         console.log(this.input.value);
     }
 }

HTML

<mat-form-field class="input">
    <input matInput placeholder="Text" #inputText>
</mat-form-field>
<div class="button" (click)="onClick()">
   <button mat-raised-button class='submit-button'>Submit</button>
</div>

This is how we can simply print. If you are using any forms, it can vary based on the type of form we are using.

Upvotes: 1

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

Stackblitz: https://stackblitz.com/edit/angular-cgg96i?file=src%2Fapp%2Fapp.component.html

The following code will help you trigger whenever value changes

<input type="text" [(ngModel)]="username" (ngModelChange)="onTyping(username)">


  onTyping($event){
    console.log($event)
  }

Or by simply 

<input type="text" [(ngModel)]="username">
<button (click)="onClick()">Click me</button>

you can get value from variable

onClick(){
 console.log(this.username)
}

Upvotes: 0

Suhas Parameshwara
Suhas Parameshwara

Reputation: 1454

This can be done using ngModel in Angular.

TS

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

@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.component.html',
  styleUrls: ['./input-boxes.component.css']
})
export class InputBoxesComponent {
  public text: string;
  onClick(){
    console.log(this.text);
  }
}

HTML

<input matInput placeholder="Text"
      [(ngModel)]="text">

To use ngModel you have to import FormsModule package in app.module.ts

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

    @NgModule({
        imports: [
             FormsModule      
        ]

Basically, ngModel is used to bind value from the respective HTML element. ngModel is mostly used on template-driven forms. If you have more than two inputs you can use reactive forms.

Upvotes: 2

Ansuman
Ansuman

Reputation: 1494

Easiest way to do this is by adding a template reference variable if you don't want to use template driven/reactive forms:

<mat-form-field class="input">
    <input matInput placeholder="Text" #input>
</mat-form-field>

<div class="button" (click)="onClick(input.value)">
    <button mat-raised-button class='submit-button'>Submit</button>
</div>

In the component:

onClick(value){
    console.log(value);
}

Upvotes: 4

Related Questions