Angular 2 beginner. Typescript console.log a text with variable values

Question

I am new to angular and cannot figure out how to log in console the value of 2 variables. As the result I get the undefined values of the variables. Why?

My html:

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

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

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

.comonent.ts:

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

Ate you sure the elements have values?

Carcigenicate
– Carcigenicate

2017-05-22 17:59:08 +00:00
Commented May 22, 2017 at 17:59 — Carcigenicate
– Carcigenicate, Commented May 22, 2017 at 17:59
I will update the code now

John P
– John P

2017-05-22 18:00:33 +00:00
Commented May 22, 2017 at 18:00 — John P
– John P, Commented May 22, 2017 at 18:00

Steve · Accepted Answer · 2017-05-22 18:44:58Z

1

Move the template variables from the labels to the inputs themselves:

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

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

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

answered May 22, 2017 at 18:44

Steve

1321 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

Angular 2 beginner. Typescript console.log a text with variable values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related