Angular - extracting the click info of an HTML element

Question

I am using Angular 4 to build an app after taking an Udemy course. I am getting started by playing around with some events. So far there is only one component app.component.ts. In my HTML, I have this header element to which I have attached a click event:

<h2 class="url-link" (click)="viewTopics()" #headerLink>View archived topics</h2>

I added the local reference #headerLink to the h2 element to try and listen to the click event in other HTML elements. But I can't do so. I did a console.log of the element in the event function:

export class AppComponent {
  @ViewChild('headerLink') headerLink: ElementRef;

  viewTopics() {
    console.log(this.headerLink);
  }
}

The console log shows the h2 element having a property nativeElement which has the property onclick but this onclick property is always null. Is it possible to access the click event on the h2 element this way or do I have to use only (click) events on the h2 element?

You can pass "headerLink" to any function you write on the HTML. (click)="viewTopics(headerLink)" - even on another element — Ziv Weissman, Dec 03 '17 at 21:00
My question is how do I get the click info from this local reference headerLink? The only property I can find is the onclick property which is always null. Am I looking at the wrong property? — Shiv Kumar, Dec 03 '17 at 21:05

score 1 · Answer 1 · answered Dec 03 '17 at 21:21

1

You can get the click event details by passing in the event

<h2 class="url-link" (click)="viewTopics($event)" #headerLink>View archived topics</h2>

viewTopics(event){
    console.log('evt', event);
}

answered Dec 03 '17 at 21:21

LLai

13,128
3
41
45

DrNio · Accepted Answer · 2017-12-03T21:08:15.237

0

<h2 (click)="viewTopics()"></h2>
<p *ngIf='headerIsClicked === true'>Toggle me</p>
<h3 *ngIf='headerIsClicked === true'>and me</h3>

viewTopics(): void {
    this.headerIsClicked = !this.headerIsClicked;
  }

where headerIsClicked is a public boolean prop for example public headerIsClicked: boolean = false;

edited Dec 03 '17 at 21:08

answered Dec 03 '17 at 20:43

DrNio

1,936
1
19
25

My question was if I want to listen to this click event on h2 on another HTML element say a
or an how would I do so? So, these other elements should display only if h2 is clicked for example. Also, the console.log(this.headerLink) in above example does not seem to have the onclick property which is still null. – Shiv Kumar Dec 03 '17 at 20:51
you bind the click as i mentioned, then you set a state (boolean) in the viewTopics function for example and then use *ngIf on the other elements you mentioned to hide them or make them visible – DrNio Dec 03 '17 at 21:04
So use another variable to set the status as h2 being clicked. I managed to do that but I thought it might be possible to do it without another variable but merely check for the HTML property of h2 to listen to the click in other HTML elements. – Shiv Kumar Dec 03 '17 at 21:07
1

something else but not exactly what you are asking is `host: { '(document:click)': 'onClick($event)', },` you might need it in the future – DrNio Dec 03 '17 at 21:11
I found this other question on host binding and host listeners https://stackoverflow.com/questions/37965647/hostbinding-and-hostlistener-what-do-they-do-and-what-are-they-for – Shiv Kumar Dec 03 '17 at 21:25

Angular - extracting the click info of an HTML element

2 Answers2