CODEWITHSUNDEEP
javascriptangularonclickclick
milesholt
milesholt

Reputation: 161

Angular click event updates variable but not javascript onclick method

I have the following setup:

app.component.ts

prop:string = 'foo';

test(val){
 this.prop = val;
}

app.component.html

{{prop}}

<button (click)="test('bar')">Test</button>
<a href="#" onclick="test('bar'); return false;">Test2</a>

Both call test() successfully, and the 'prop' variable changes to 'bar'. My question is why only the first (click) event updates the view whereas the second does not? I've also tried using a timeout and the ChangeDetectorRef detectChanges() method inside of test().

Upvotes: 1

Views: 953

Answers (2)

Ganesh
Ganesh

Reputation: 6016

There is a syntax difference between both hence event triggering which causes detectChanges by default angular DOM manipulation.

() is one-way event binding, which passes data from view to component.

So in your case, button is triggering an event which causes detectChanges where as not with <a> tag.

Upvotes: 1

Julius Dzidzevičius
Julius Dzidzevičius

Reputation: 11000

onclick scope is the DOM element it is attached to it. So clicking that you should get an error as there is no such thing in your <a> tag as test() function. You can see the scope yourself:

<a href="#" onclick="console.log(this)">Test2</a>

Use an event listener instead - <a href="#"(click)="test('bar')">Test2</a>

Upvotes: 0

Related Questions