Getting a specific DOM element in angular component using click HostListener from an array

Question

This is a little bit harder to explain, but I will do my best.

I have a component called feed, and the component it expects an array(feeds) of objects(feed). I have a template which i display all the feeds and the way i create them is using ngFor.

E.g it creates div containers for each one of them individually.

Basically I'm trying identifying the specific feed i clicked on, rather than all of them with that feed-container class...Because of course, it is shared based on how many feed items we have in the array.

The problem I'm facing is that I want to be able to click on one(1) feed and console log something. How i achieve this is by creating this:

@HostListener('click', ['$event'])
  feedClickEvent(event: any) {
    console.log(event);
    this.feedListModel.map((feedItem, index) => {
      const x = document.getElementsByClassName(index.toString());

      if (x[0].id === feedItem.id) {
        //console.log("I`m triggered ", feedItem.id);
      }
    });
  }

However, I would like to get the current div id which is clicked on but i don't know exactly how, I've tried many different scenarios but they didn't work.

The feedListModel is the input to the component with the object array and based on that i create the individual divs(feeds).

Here is the HTML template:

<div class="container">
    <div class="row feed-container" id="{{feedItem.id}}" *ngFor="let feedItem of feedListModel; let i = index">
        <div class="feed-item {{i}}" id="{{feedItem.id}}">
            <div class="col-sm-4 column-inlineBlock feed-avatar">
                <span>
                    <k-icon [icon]=" { type: 'image', src: 'someUrlPhoto', extraClass: 'feed-icon'}"></k-icon>
                </span>
            </div>
            <div class="col-sm-7 column-inlineBlock main-feed-content">
                <div class="title"><strong>{{feedItem.secondColumn.title}}</strong></div>
                <div class="description">{{feedItem.secondColumn.description}}</div>
                <div class="footer" *ngIf="!feedItem.secondColumn.footer.isTimeAgo">{{feedItem.secondColumn.footer.value}}</div>
                <div class="footer time-ago" *ngIf="feedItem.secondColumn.footer.isTimeAgo">
                    <k-icon [icon]="{type: 'fas', name: feedItem.secondColumn.footer.icon.icon, extraClass: 'icon-clock'}"></k-icon>
                    {{feedItem.secondColumn.value | timeAgo}}
                </div>
            </div>
            <div class="col-sm-1 column-inlineBlock third-col" *ngIf="!isTwoColumn">
                <div class="third-col-wrapper">
                    <span class="icon-indicator {{feedItem.thirdColumn.status}}">
                        <k-icon [icon]="{type: 'fas', name: feedItem.thirdColumn.kIcon.icon, extraClass: 'icon-number'}"></k-icon>
                </span>
                <span class="number-indicator">
                    <strong id="value-indicator">{{feedItem.thirdColumn.value}}</strong>
                </span>
                </div>
            </div>
        </div>
    </div>
</div>

For instance, in the hostlistener i console log the event.currentTarget and i get 2 divs, even though i clicked on the first div(feed). In other words, there are 2 feeds. And i need the clicked one only with the ID of it so that i can do something with it.

Answer 1

If I have understood, you just need to bind a click event on element in template and add a method in the component to do what you want:

in the template:

<div class="container">
    <div class="row feed-container" (click)="select(feedItem)" id="{{feedItem.id}}" *ngFor="let feedItem of feedListModel; let i = index">
         ...
    </div>
</div>

in the component:

public select(feedItem: any) {
    // your logic here
}