CODEWITHSUNDEEP
javascriptevent-handling
Samanthika Rajapaksa
Samanthika Rajapaksa

Reputation: 1050

print textbox input value in console by clicking button

This is my app.component.ts

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

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

  public name:string = 'class-binding';
  

  sucessClass='green';
 f1(username){
   console.log('welcome:$(username.value)')
 }

}

This is my app.component.html

<div>

  <h3>Username:<input #username/></h3>

  <button (click)="f1(username)">click</button>
</div>

I want print text box input value in my console. In here I have print my console like this. welcome:$(username.value)

Upvotes: 1

Views: 629

Answers (3)

Ramin Kamali
Ramin Kamali

Reputation: 45

it should be `welcome:${username.value}`

Upvotes: 0

Get Off My Lawn
Get Off My Lawn

Reputation: 36311

Your Template Literal is written incorrectly. There are two mistakes that you have:

  1. You are using quotes instead of backticks.
  2. You are using parentheses instead of braces.

To make your log work, replace the two so it looks like this:

 f1(username){
   console.log(`welcome:${username.value}`)
 }

Here is a working example

Upvotes: 1

Ran Turner
Ran Turner

Reputation: 18036

What you want to use is template literals using `` (backticks)

Template literals are string literals that allow you to use embedded expressions.

The $ sign followed by curly braces will allow you to place a placeholder inside of the expression.

For example: 

var obj = {value: 5};
f1(obj);

function f1(username){
   console.log(`welcome:${username.value}`);
 }

Upvotes: 0

Related Questions