implement onclick() in custom directive angular 4

Question

I have a simple button and a directive I want to access the button's style, add MarginLeft with an onclick() function in the directive it is not working but setting the css from constructor works how can I use this with on click? please help:

the directive:

    import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[Bluecolored]'
})
export class BluecoloredDirective {

  constructor(private element:ElementRef) {
    console.log(element);
   element.nativeElement.style.color="blue";
   }
clicked(){
  this.element.nativeElement.style.marginLeft=20;
  console.log("marzi"+this.element.nativeElement.style.marginLeft);
}
}

this is the template:

<p Bluecolored>
  new-fom works!
</p>
<h1 Bluecolored>Blue Colored</h1>
<button   (click)="clicked()" Bluecolored>Click</button>

Laurence Mommers · Accepted Answer · 2019-04-26 21:06:01Z

16

You could use a HostListener in your directive:

@HostListener('click') onClick(){
    this.element.nativeElement.style.marginLeft=20;
    console.log("marzi"+this.element.nativeElement.style.marginLeft);
}

this way you can remote (click)="clicked()" from the button aswell

I named mine onClick, but you could name it clicked aswell

edited Apr 26, 2019 at 21:06

answered Oct 19, 2017 at 19:25

Laurence Mommers

7055 silver badges12 bronze badges

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

6 Comments

Hussain Wali Over a year ago

but I want to select a particular element from the dom say a button, How can I do that?

Laurence Mommers Over a year ago

HostListener only listens for events on the element the directive is bound to.

Laurence Mommers Over a year ago

i was to late to edit my previous comment so, if you want multiple elements to change on the click of a button you are probably better of using component and a variable controlling the styles of your element (or a variable toggling a class).

Hussain Wali Over a year ago

can we use @HostListener() from a component or is this only accessible from a directive??

Laurence Mommers Over a year ago

yes, components extend directives, so all posibilities on directives are also possible on components, HostListener on a component will listen for events on the component element (e.g. <app-component></app-component>)

|

Collectives™ on Stack Overflow

implement onclick() in custom directive angular 4

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related