unable to print variable value inside angular function

Question

I am new to Angular and I have written the following code but this code doesn't seems to be working for me.

html:

<form class= "ui large form segment">
  <h3 class= "ui header">Add a link</h3>

  <div class="field">
    <label for = "title">Title: </label>
    <input name= "title" #newtitle>
  </div>

  <div class="field">
    <label for = "link">Link: </label>
    <input name= "link" #newlink>
  </div>

<button (click) = "addArticle(newtitle, newlink)" class= "ui positive right floated button">
  Submit link
</button>

</form>

.ts

addArticle(title : HTMLInputElement, link : HTMLInputElement):boolean{
    console.log('Adding article with title: ${title.value} and link ${link.value}');
    return false;
  }

when I run the code I get below output in the console, don't know what I am doing wrong:

Adding article with title: ${title.value} and link ${link.value}

Prerak Tiwari · Accepted Answer · 2017-08-04 02:24:25Z

1

I think you are using Single Quote(') instead of backtick(`), try the below code, it should work

addArticle(title : HTMLInputElement, link : HTMLInputElement):boolean{
    console.log(`Adding article with title: ${title.value} and link ${link.value}`);
    return false;
  }

edited Aug 4, 2017 at 2:24

answered Aug 4, 2017 at 1:40

Prerak Tiwari

3,4765 gold badges38 silver badges68 bronze badges

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

Comments

Sachin Kumar · Accepted Answer · 2017-08-04 03:08:41Z

0

Simply Replace single quotes with backtick

edited Aug 4, 2017 at 3:08

answered Aug 4, 2017 at 2:01

Sachin Kumar

3,2762 gold badges28 silver badges60 bronze badges

Collectives™ on Stack Overflow

unable to print variable value inside angular function

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