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 ponent:

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

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

HTML part of the ponent:

<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 ponent:

.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.

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 ponent:

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

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

HTML part of the ponent:

<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 ponent:

.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.

• javascript
• angular
• input
• submit

• 1 have you explored about ngModel? – Suhas Parameshwara Commented Aug 22, 2019 at 9:14
• Yesterday I wrote an answer to a similar problem: stackoverflow./questions/57589793/… Might help you. In the example it toggles the class of the element near to it. In your case you just have to read the .value of it – MauriceNino Commented Aug 22, 2019 at 9:15

4 Answers 4

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 ponent:

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

This can be done using ngModel in Angular.

TS

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

@Component({
  selector: 'app-input-boxes',
  templateUrl: './input-boxes.ponent.html',
  styleUrls: ['./input-boxes.ponent.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.

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 pletely 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.ponent.html',
  styleUrls: ['./input-boxes.ponent.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.ponent.html',
   styleUrls: ['./input-boxes.ponent.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.

Stackblitz: https://stackblitz./edit/angular-cgg96i?file=src%2Fapp%2Fapp.ponent.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)
}