Angular 2 Click event with parameter and return value

Question

This hard coded call to my generic javascript function "openTab" works and the return value from openTab is false so the code will change/show tabs without submitting the form.

<button class="tablinks" onclick="return openTab(event,'tab1');">Tab 1</button>

As soon as I make this dynamic I run into several errors:

<ng-container *ngFor="let option of question.options">
    <button class="tablinks" (click)="return openTab(event, option.tabId);">{{ option.tabName }}
</ng-container>

The above code is where I am trying to get to but the parser does not like having "(click)=return" and when I remove the return I get an exception "_co.openTab" is not a function.

Here are the things I have tried:

<button class="tablinks" onclick="return openTab(event, 'tab1');">{{ option.tabName }}</button>

The above works but the id is hard coded, the tabName is dynamic.

<button class="tablinks" onclick="return openTab(event, {{option.tabId}});">{{ option.tabName }}</button>

The code above gives the following error: Binding to event property 'onclick' is disallowed for security reasons, please use (click)=...

<button class="tablinks" (click)="return openTab(event, {{option.tabId}});">{{ option.tabName }}</button>

The code above won't parse due to the return: Parser Error: Unexpected token

<button class="tablinks" (click)="openTab(event, option.tabId);">{{ option.tabName }}</button>

The code above parses but when you click the button you get: TypeError: _co.openTab is not a function

<button class="tablinks" (myClick)="openTab(event, option.tabId);">{{ option.tabName }}</button>

The code above parses but when you click the button nothing happens, openTab is not called, no error

Any suggestions?

vince · Accepted Answer · 2018-03-30 00:15:00Z

3

The syntax is $event: https://angular.io/guide/user-input#get-user-input-from-the-event-object. The following should work:

<button (click)="openTab($event, option.tabId)"></button>

Note that the openTab method must be public on the component class.

answered Mar 30, 2018 at 0:15

vince

8,3563 gold badges39 silver badges45 bronze badges

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

1 Comment

kjkerstens Over a year ago

The $event and explicitly making openTab public did the trick

Collectives™ on Stack Overflow

Angular 2 Click event with parameter and return value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related