Angular2 directive selector syntax

Question

I want to create directive in Angular2 for custom event "rowclick": <tr (rowclick)="onRowClicked(item)"></tr>. Event will respond to clicks on row, but filters out clicks on links and buttons inside row cells.

Directive declaration:

@Directive({
    selector: '[(rowclick)]',
    events: ['rowclick'],
    host: { '(click)': 'onClick($event)' }
})

I have a problem to write directive selector, which targets (rowclick) property. I tried [rowclick], [(rowclick)], [\\(rowclick\\)]. None of them works.

How should I write selector to target (rowclick) attribute on tr element?

Answer 1

I believe that would be confusing as (event) syntax is used to bind to events. You can try to define a attribute on the tr or use tr itself as a selector

selector: '[special]' // <tr special>...</tr>

or

selector:'tr'