Angular 2 assign a click function using a ternary operator

Question

I would like to apply a click function:

setPage(page - 1)

But only if this condition matches:

page > 1

I thought I could do it like this but it didn't work, any ideas?

<a (click)="{'setPage(page - 1)' : page > 1}">Previous</a></li>

Have you tried giving the anchor it's own click method which handles this logic? It would be cleaner. — Kallum Tanton
– Kallum Tanton, Commented Mar 3, 2017 at 11:35
Just assign onLinkClick(page) to it and let the method handle it if(page > 1) ...do something — cyr_x
– cyr_x, Commented Mar 3, 2017 at 11:36
However if you are dead set on this mechanism it would be something like (click)="page > 1 ? setPage(page - 1) : void", assuming that setPage has a void return. — Kallum Tanton
– Kallum Tanton, Commented Mar 3, 2017 at 11:36
@cyrix That method would mean that the setPage method is coupled to the anchor - it's likely that other things will call this method and the page > 1 logic will not be applicable. — Kallum Tanton
– Kallum Tanton, Commented Mar 3, 2017 at 11:37
It did mean the same as you ;) just forgot to change the method name. — cyr_x
– cyr_x, Commented Mar 3, 2017 at 11:38

eko · Accepted Answer · 2017-03-03 11:41:50Z

14

This should work:

<a (click)="page > 1 ? setPage(page - 1) : null">Previous</a></li>

similar example: http://plnkr.co/edit/ojO0GwQktneBuzKqKTwz?p=preview

answered Mar 3, 2017 at 11:41

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

Comments

cyr_x · Accepted Answer · 2017-03-03 11:43:54Z

4

As mentioned in the comments:

Create a new method in your component called for example onAnchorClick and let it handle the logic.

public onAnchorClick(page: number) {
   if(page > 1) {
     this.setPage(page - 1);
     // some other stuff to do
   }
}

and bind it to your Anchor

<a (click)="onAnchorClick(page)">Previous</a>

answered Mar 3, 2017 at 11:43

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

1 Comment

Andrew Howard Over a year ago

Thanks for your help on this. I went ahead with Echonax answer because I have many other operators going on in the same page and preferred keeping the logic there rather than having some logic in the html file ans some logic in the method. Many thanks :)

Rahul Kumar · Accepted Answer · 2017-03-03 11:45:09Z

1

You can do this

<a (click)="page > 1 ? setPage(page - 1) : null">Previous</a></li>

answered Mar 3, 2017 at 11:45

Rahul Kumar

5,2295 gold badges35 silver badges44 bronze badges

1 Comment

Andrew Howard Over a year ago

Thanks for your help Rahul. Echonax got in there just a few seconds before you but still thanks for your help. :)

Collectives™ on Stack Overflow

Angular 2 assign a click function using a ternary operator

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related