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
– Ziv Weissman, Commented Dec 3, 2017 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
– Shiv Kumar, Commented Dec 3, 2017 at 21:05

LLai · Accepted Answer · 2017-12-03 21:21:31Z

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 3, 2017 at 21:21

LLai

13.5k3 gold badges44 silver badges46 bronze badges

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

Comments

DrNio · Accepted Answer · 2017-12-03 21:08:15Z

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 3, 2017 at 21:08

answered Dec 3, 2017 at 20:43

DrNio

1,9841 gold badge20 silver badges26 bronze badges

5 Comments

Shiv Kumar Over a year ago

My question was if I want to listen to this click event on h2 on another HTML element say a <p></p> or an <img> 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.

DrNio Over a year ago

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

Shiv Kumar Over a year ago

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.

DrNio Over a year ago

something else but not exactly what you are asking is host: { '(document:click)': 'onClick($event)', }, you might need it in the future

Shiv Kumar Over a year ago

I found this other question on host binding and host listeners stackoverflow.com/questions/37965647/…

Collectives™ on Stack Overflow

Angular - extracting the click info of an HTML element

2 Answers 2

Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Linked

Related