Angular - How to access the nativeElement in click handler

Question

Maybe only a "stylish" but nonetheless...

I've the following which is working:

// Template
<div *ngFor="let media of period.media">
    .
    .
    .
    <button #btn (click)="onDeleteClick(btn)" [attr.media-id]="media.ID">
        {{'DELETE' | translate}}
    </button>
</div>

//component.ts
    this.period.media = [
        {id: 123}, {id: 456}, ...
    ];
    .
    .
    .
    onDeleteClick(elem) {
        console.log(elem._elementRef.nativeElement.getAttribute('media-id'));
    }

It works (the console shows 123, 456,...) but accessing the nativeElelement using the _elemntRef sounds like a hack (underscore denotes Private property, like _privateVar, isn't it).

So what would be a more elegant way to access the nativeElement or, even better, its 'media-id' attribute?

Thanks a lot for any hint.

EDIT

The answer to this question is in the comments from user184994 and JB Nizet. Since they both addressed the problem correctly I cannot set the "accepted answer" flag since it can be assigned to only once.

Therefore I'm editing my question as acknowledgement of this.

You could always pass it in to your `onDeleteClick`, like so `onDeleteClick(btn, media.ID)` — user184994, May 27 '18 at 18:24
The view should be derived from the model, not vice-versa. Pass the media, not a reference to the button. And get the media ID using media.id: `(click)="onDeleteClick(media)"`. The media-id attribute on the button is useless. — JB Nizet, May 27 '18 at 18:35
@user184994 and @ JB_Nizet. Wow, I feel so stupid! It was sooo simple! I would say to both user184994 and JB_Nizet to post your comments as an answer. I wish it was possible would the check both as the accepted, but iI fear it is not. — , May 27 '18 at 19:05

score 1 · Answer 1 · answered May 28 '18 at 06:03

Answer is already given but I would like to add one more point and answer it. you're using button, for most browsers the default type of button is submit. and if try to delete it will get submitted,if you do not want it you can change it's type to type = "button" .

<div *ngFor="let media of period.media">
    <button type = "button" #btn 
  (click)="onDeleteClick(media)"
   [attr.media-id]="media.ID">{{'DELETE' | translate}}</button>
</div>

additionally if you want you can pass only id if you need or want, just use onDeleteClick(media.id) this is better in terms of performance. You can remove template varibale if you don not required it.
//component.ts

this.period.media = [
    {id: 123}, {id: 456}, ...
];
.
.
.
onDeleteClick(media) {
    console.log(media.id);
}

if you are passing only id then need to change syntax like

  onDeleteClick(id) {
        console.log(id);

    }

@'v8 sagar' Thanks for the additional detail. It is very useful in general, but in my case I need the whole set of data associated with media. Furthermore, I will need to pass additional params to the click handler. I'm implementing a kind of "cards" that can be added/removed dinamically. Thanks in any case for the clarification. — , May 28 '18 at 09:29

Angular - How to access the nativeElement in click handler

1 Answers1